@ngstarter-ui/components 21.0.27 → 21.0.29
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/ai/component-registry.json +69 -3
- package/fesm2022/ngstarter-ui-components-file-type.mjs +170 -0
- package/fesm2022/ngstarter-ui-components-file-type.mjs.map +1 -0
- package/fesm2022/ngstarter-ui-components-tabs.mjs +7 -6
- package/fesm2022/ngstarter-ui-components-tabs.mjs.map +1 -1
- package/package.json +5 -1
- package/types/ngstarter-ui-components-file-type.d.ts +27 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ngstarter-ui-components-file-type.mjs","sources":["../../../projects/components/file-type/src/file-type/file-type.ts","../../../projects/components/file-type/src/file-type/file-type.html","../../../projects/components/file-type/ngstarter-ui-components-file-type.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n} from '@angular/core';\nimport { FileTypeName } from '../types';\n\nconst EXTENSION_TO_TYPE: Record<string, FileTypeName> = {\n avi: 'avi',\n csv: 'csv',\n doc: 'doc',\n docx: 'doc',\n html: 'html',\n htm: 'html',\n jpeg: 'jpg',\n jpg: 'jpg',\n json: 'json',\n jsonld: 'json',\n mkv: 'mkv',\n mov: 'mov',\n mp3: 'mp3',\n m4a: 'mp3',\n mp4: 'mp4',\n pdf: 'pdf',\n png: 'png',\n pot: 'ppt',\n potx: 'ppt',\n pps: 'ppt',\n ppsx: 'ppt',\n ppt: 'ppt',\n pptx: 'ppt',\n svg: 'svg',\n text: 'txt',\n txt: 'txt',\n wav: 'wav',\n webm: 'webm',\n xls: 'xls',\n xlsx: 'xls',\n xml: 'xml',\n zip: 'zip',\n};\n\nconst MIME_TYPE_TO_TYPE: Record<string, FileTypeName> = {\n 'application/csv': 'csv',\n 'application/json': 'json',\n 'application/ld+json': 'json',\n 'application/msword': 'doc',\n 'application/pdf': 'pdf',\n 'application/rtf': 'doc',\n 'application/vnd.ms-excel': 'xls',\n 'application/vnd.ms-powerpoint': 'ppt',\n 'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'ppt',\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xls',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'doc',\n 'application/x-zip-compressed': 'zip',\n 'application/xml': 'xml',\n 'application/zip': 'zip',\n 'audio/mp3': 'mp3',\n 'audio/mpeg': 'mp3',\n 'audio/wav': 'wav',\n 'audio/wave': 'wav',\n 'audio/x-wav': 'wav',\n 'image/jpeg': 'jpg',\n 'image/jpg': 'jpg',\n 'image/png': 'png',\n 'image/svg+xml': 'svg',\n 'multipart/x-zip': 'zip',\n 'text/comma-separated-values': 'csv',\n 'text/csv': 'csv',\n 'text/html': 'html',\n 'text/json': 'json',\n 'text/plain': 'txt',\n 'text/xml': 'xml',\n 'video/mp4': 'mp4',\n 'video/quicktime': 'mov',\n 'video/webm': 'webm',\n 'video/x-matroska': 'mkv',\n 'video/x-msvideo': 'avi',\n};\n\nlet nextIconId = 0;\n\n@Component({\n selector: 'ngs-file-type',\n exportAs: 'ngsFileType',\n templateUrl: './file-type.html',\n styleUrl: './file-type.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'ngs-file-type not-prose',\n '[attr.role]': 'decorative() ? null : \"img\"',\n '[attr.aria-label]': 'decorative() ? null : resolvedLabel()',\n '[attr.aria-hidden]': 'decorative() ? \"true\" : null',\n '[attr.data-file-type]': 'type()',\n },\n})\nexport class FileType {\n private readonly iconId = `ngs-file-type-${nextIconId++}`;\n\n mimeType = input<string | null | undefined>();\n extension = input<string | null | undefined>();\n fileName = input<string | null | undefined>();\n fallback = input<FileTypeName>('txt');\n label = input<string | null | undefined>();\n decorative = input(false, { transform: booleanAttribute });\n\n readonly type = computed<FileTypeName>(() => this.resolveType());\n\n protected readonly resolvedLabel = computed(() => {\n const label = this.label();\n\n if (label) {\n return label;\n }\n\n return `${this.type().toUpperCase()} file`;\n });\n\n private resolveType(): FileTypeName {\n const extensionType =\n this.resolveExtension(this.extension()) ?? this.resolveExtension(this.fileName());\n\n if (extensionType) {\n return extensionType;\n }\n\n const mimeType = this.normalizeMimeType(this.mimeType());\n\n if (mimeType) {\n return MIME_TYPE_TO_TYPE[mimeType] ?? this.resolveMimeFamily(mimeType) ?? this.fallback();\n }\n\n return this.fallback();\n }\n\n private resolveExtension(value: string | null | undefined): FileTypeName | null {\n const extension = this.normalizeExtension(value);\n\n if (!extension) {\n return null;\n }\n\n return EXTENSION_TO_TYPE[extension] ?? null;\n }\n\n private normalizeExtension(value: string | null | undefined): string | null {\n if (!value) {\n return null;\n }\n\n const normalized = value.trim().toLowerCase();\n\n if (!normalized) {\n return null;\n }\n\n const fileExtension = normalized.includes('.')\n ? normalized.split('.').pop()\n : normalized.replace(/^\\./, '');\n\n return fileExtension || null;\n }\n\n private normalizeMimeType(value: string | null | undefined): string | null {\n if (!value) {\n return null;\n }\n\n const mimeType = value.split(';')[0].trim().toLowerCase();\n\n return mimeType || null;\n }\n\n private resolveMimeFamily(mimeType: string): FileTypeName | null {\n if (mimeType.startsWith('image/')) {\n return 'png';\n }\n\n if (mimeType.startsWith('video/')) {\n return 'mp4';\n }\n\n if (mimeType.startsWith('audio/')) {\n return 'mp3';\n }\n\n if (mimeType.startsWith('text/')) {\n return 'txt';\n }\n\n return null;\n }\n\n protected gradientId(type: FileTypeName): string {\n return `${this.iconId}-${type}-pageGradient`;\n }\n\n protected gradientUrl(type: FileTypeName): string {\n return `url(#${this.gradientId(type)})`;\n }\n}\n","<span class=\"icon\">\n @switch (type()) {\n @case ('avi') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('avi')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#8D7CFF\" />\n <stop offset=\"1\" stop-color=\"#4531C9\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('avi')\" />\n <g transform=\"translate(0 -4)\">\n <rect\n x=\"39\"\n y=\"35\"\n width=\"50\"\n height=\"30\"\n rx=\"6\"\n stroke=\"white\"\n stroke-opacity=\"0.36\"\n stroke-width=\"5\"\n />\n <path d=\"M58 43V57L72 50L58 43Z\" fill=\"white\" fill-opacity=\"0.44\" />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#4531C9\"\n >\n AVI\n </text>\n </g>\n </svg>\n }\n @case ('csv') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('csv')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#42D9D2\" />\n <stop offset=\"1\" stop-color=\"#0B8A97\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('csv')\" />\n <g transform=\"translate(0 -2)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M42 33C38.686 33 36 35.686 36 39V61C36 64.314 38.686 67 42 67H86C89.314 67 92 64.314 92 61V39C92 35.686 89.314 33 86 33H42ZM43 37C41.343 37 40 38.343 40 40V49H54V37H43ZM57 37H71V49H57V37ZM74 37V49H88V40C88 38.343 86.657 37 85 37H74ZM40 52V61C40 62.657 41.343 64 43 64H54V52H40ZM57 52H71V64H57V52ZM74 52V64H85C86.657 64 88 62.657 88 61V52H74Z\"\n fill=\"white\"\n fill-opacity=\"0.5\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#0B8A97\"\n >\n CSV\n </text>\n </g>\n </svg>\n }\n @case ('doc') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('doc')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#5EA8FF\" />\n <stop offset=\"1\" stop-color=\"#1D5FD6\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('doc')\" />\n <g transform=\"translate(0 2)\">\n <path\n d=\"M42 32H82M42 44H86M42 56H76\"\n stroke=\"white\"\n stroke-opacity=\"0.34\"\n stroke-width=\"6\"\n stroke-linecap=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#1D5FD6\"\n >\n DOC\n </text>\n </g>\n </svg>\n }\n @case ('html') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('html')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#FF7A5F\" />\n <stop offset=\"1\" stop-color=\"#D23B21\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('html')\" />\n <g transform=\"translate(0 -2)\">\n <path\n d=\"M53 36L41 48L53 60M75 36L87 48L75 60M68 34L60 62\"\n stroke=\"white\"\n stroke-opacity=\"0.36\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"16\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#D23B21\"\n >\n HTML\n </text>\n </g>\n </svg>\n }\n @case ('jpg') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('jpg')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#FF78B6\" />\n <stop offset=\"1\" stop-color=\"#C92678\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('jpg')\" />\n <g transform=\"translate(0 -4)\">\n <rect x=\"37\" y=\"34\" width=\"54\" height=\"36\" rx=\"7\" fill=\"white\" fill-opacity=\"0.18\" />\n <path\n d=\"M39 62L51 50L61 59L70 49L89 66\"\n stroke=\"white\"\n stroke-opacity=\"0.62\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"75\" cy=\"44\" r=\"5\" fill=\"white\" fill-opacity=\"0.62\" />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#C92678\"\n >\n JPG\n </text>\n </g>\n </svg>\n }\n @case ('json') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('json')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#667085\" />\n <stop offset=\"1\" stop-color=\"#202939\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('json')\" />\n <g transform=\"translate(0 -4)\">\n <path\n d=\"M51 33C45 33 43 37 43 41V45C43 48 41 50 38 50C41 50 43 52 43 55V59C43 63 45 67 51 67\"\n stroke=\"white\"\n stroke-opacity=\"0.42\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M77 33C83 33 85 37 85 41V45C85 48 87 50 90 50C87 50 85 52 85 55V59C85 63 83 67 77 67\"\n stroke=\"white\"\n stroke-opacity=\"0.42\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M57 43H70M57 57H73\"\n stroke=\"white\"\n stroke-opacity=\"0.44\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"16\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#202939\"\n >\n JSON\n </text>\n </g>\n </svg>\n }\n @case ('mkv') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('mkv')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#AA74FF\" />\n <stop offset=\"1\" stop-color=\"#5C26B8\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('mkv')\" />\n <g transform=\"translate(0 -4)\">\n <rect\n x=\"39\"\n y=\"35\"\n width=\"50\"\n height=\"30\"\n rx=\"6\"\n stroke=\"white\"\n stroke-opacity=\"0.36\"\n stroke-width=\"5\"\n />\n <path d=\"M58 43V57L72 50L58 43Z\" fill=\"white\" fill-opacity=\"0.44\" />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#5C26B8\"\n >\n MKV\n </text>\n </g>\n </svg>\n }\n @case ('mov') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('mov')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#45D0FF\" />\n <stop offset=\"1\" stop-color=\"#1268C7\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('mov')\" />\n <g transform=\"translate(0 -4)\">\n <rect\n x=\"39\"\n y=\"35\"\n width=\"50\"\n height=\"30\"\n rx=\"6\"\n stroke=\"white\"\n stroke-opacity=\"0.36\"\n stroke-width=\"5\"\n />\n <path d=\"M58 43V57L72 50L58 43Z\" fill=\"white\" fill-opacity=\"0.44\" />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#1268C7\"\n >\n MOV\n </text>\n </g>\n </svg>\n }\n @case ('mp3') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('mp3')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D36BFF\" />\n <stop offset=\"1\" stop-color=\"#8A2BC6\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('mp3')\" />\n <g transform=\"translate(0 0)\">\n <path\n d=\"M52 56V35L82 30V49M52 56C52 59.5 49.2 62 45.5 62C41.8 62 39 59.5 39 56C39 52.5 41.8 50 45.5 50C49.2 50 52 52.5 52 56ZM82 49C82 52.5 79.2 55 75.5 55C71.8 55 69 52.5 69 49C69 45.5 71.8 43 75.5 43C79.2 43 82 45.5 82 49Z\"\n stroke=\"white\"\n stroke-opacity=\"0.36\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#8A2BC6\"\n >\n MP3\n </text>\n </g>\n </svg>\n }\n @case ('mp4') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('mp4')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#5E9BFF\" />\n <stop offset=\"1\" stop-color=\"#2745C8\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('mp4')\" />\n <g transform=\"translate(0 -4)\">\n <rect\n x=\"39\"\n y=\"35\"\n width=\"50\"\n height=\"30\"\n rx=\"6\"\n stroke=\"white\"\n stroke-opacity=\"0.36\"\n stroke-width=\"5\"\n />\n <path d=\"M58 43V57L72 50L58 43Z\" fill=\"white\" fill-opacity=\"0.44\" />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#2745C8\"\n >\n MP4\n </text>\n </g>\n </svg>\n }\n @case ('pdf') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('pdf')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#FF6A5F\" />\n <stop offset=\"1\" stop-color=\"#D82432\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('pdf')\" />\n <g transform=\"translate(0 2)\">\n <path\n d=\"M42 32H82M42 44H86M42 56H76\"\n stroke=\"white\"\n stroke-opacity=\"0.34\"\n stroke-width=\"6\"\n stroke-linecap=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#D82432\"\n >\n PDF\n </text>\n </g>\n </svg>\n }\n @case ('png') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('png')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#4EC8FF\" />\n <stop offset=\"1\" stop-color=\"#147AAE\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('png')\" />\n <g transform=\"translate(0 -4)\">\n <rect x=\"37\" y=\"34\" width=\"54\" height=\"36\" rx=\"7\" fill=\"white\" fill-opacity=\"0.18\" />\n <path\n d=\"M39 62L51 50L61 59L70 49L89 66\"\n stroke=\"white\"\n stroke-opacity=\"0.62\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"75\" cy=\"44\" r=\"5\" fill=\"white\" fill-opacity=\"0.62\" />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#147AAE\"\n >\n PNG\n </text>\n </g>\n </svg>\n }\n @case ('ppt') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('ppt')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#FF9B4A\" />\n <stop offset=\"1\" stop-color=\"#D84A1B\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('ppt')\" />\n <g transform=\"translate(0 0)\">\n <rect\n x=\"40\"\n y=\"31\"\n width=\"48\"\n height=\"30\"\n rx=\"5\"\n stroke=\"white\"\n stroke-opacity=\"0.34\"\n stroke-width=\"5\"\n />\n <path\n d=\"M51 51H75M51 43H63\"\n stroke=\"white\"\n stroke-opacity=\"0.34\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#D84A1B\"\n >\n PPT\n </text>\n </g>\n </svg>\n }\n @case ('svg') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('svg')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#B389FF\" />\n <stop offset=\"1\" stop-color=\"#6F35D5\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('svg')\" />\n <g transform=\"translate(0 -4)\">\n <rect x=\"37\" y=\"34\" width=\"54\" height=\"36\" rx=\"7\" fill=\"white\" fill-opacity=\"0.18\" />\n <path\n d=\"M39 62L51 50L61 59L70 49L89 66\"\n stroke=\"white\"\n stroke-opacity=\"0.62\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"75\" cy=\"44\" r=\"5\" fill=\"white\" fill-opacity=\"0.62\" />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#6F35D5\"\n >\n SVG\n </text>\n </g>\n </svg>\n }\n @case ('txt') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('txt')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#95A3B8\" />\n <stop offset=\"1\" stop-color=\"#526071\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('txt')\" />\n <g transform=\"translate(0 2)\">\n <path\n d=\"M42 32H82M42 44H86M42 56H76\"\n stroke=\"white\"\n stroke-opacity=\"0.34\"\n stroke-width=\"6\"\n stroke-linecap=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#526071\"\n >\n TXT\n </text>\n </g>\n </svg>\n }\n @case ('wav') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('wav')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#FF6EDB\" />\n <stop offset=\"1\" stop-color=\"#B8299F\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('wav')\" />\n <g transform=\"translate(0 -3)\">\n <path\n d=\"M39 49H45L50 37L57 61L64 39L70 55H89\"\n stroke=\"white\"\n stroke-opacity=\"0.38\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#B8299F\"\n >\n WAV\n </text>\n </g>\n </svg>\n }\n @case ('webm') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('webm')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#53B5FF\" />\n <stop offset=\"1\" stop-color=\"#5034D5\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('webm')\" />\n <g transform=\"translate(0 -4)\">\n <rect\n x=\"39\"\n y=\"35\"\n width=\"50\"\n height=\"30\"\n rx=\"6\"\n stroke=\"white\"\n stroke-opacity=\"0.36\"\n stroke-width=\"5\"\n />\n <path d=\"M58 43V57L72 50L58 43Z\" fill=\"white\" fill-opacity=\"0.44\" />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"16\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#5034D5\"\n >\n WEBM\n </text>\n </g>\n </svg>\n }\n @case ('xls') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('xls')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#4AD991\" />\n <stop offset=\"1\" stop-color=\"#168F58\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('xls')\" />\n <g transform=\"translate(0 -2)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M42 33C38.686 33 36 35.686 36 39V61C36 64.314 38.686 67 42 67H86C89.314 67 92 64.314 92 61V39C92 35.686 89.314 33 86 33H42ZM43 37C41.343 37 40 38.343 40 40V49H54V37H43ZM57 37H71V49H57V37ZM74 37V49H88V40C88 38.343 86.657 37 85 37H74ZM40 52V61C40 62.657 41.343 64 43 64H54V52H40ZM57 52H71V64H57V52ZM74 52V64H85C86.657 64 88 62.657 88 61V52H74Z\"\n fill=\"white\"\n fill-opacity=\"0.5\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#168F58\"\n >\n XLS\n </text>\n </g>\n </svg>\n }\n @case ('xml') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('xml')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#7188FF\" />\n <stop offset=\"1\" stop-color=\"#3346B8\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('xml')\" />\n <g transform=\"translate(0 -2)\">\n <path\n d=\"M53 36L41 48L53 60M75 36L87 48L75 60M68 34L60 62\"\n stroke=\"white\"\n stroke-opacity=\"0.36\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#3346B8\"\n >\n XML\n </text>\n </g>\n </svg>\n }\n @case ('zip') {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n [attr.id]=\"gradientId('zip')\"\n x1=\"22\"\n y1=\"10\"\n x2=\"106\"\n y2=\"118\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#FFD15C\" />\n <stop offset=\"1\" stop-color=\"#C48612\" />\n </linearGradient>\n </defs>\n <rect x=\"19\" y=\"10\" width=\"90\" height=\"108\" rx=\"12\" [attr.fill]=\"gradientUrl('zip')\" />\n <g transform=\"translate(0 -4)\">\n <path\n d=\"M61 34Q61 32 63 32H65Q67 32 67 34V66Q67 68 65 68H63Q61 68 61 66V34ZM53 34Q51 34 51 36V37Q51 39 53 39H61V34H53ZM67 39V44H75Q77 44 77 42V41Q77 39 75 39H67ZM53 44Q51 44 51 46V47Q51 49 53 49H61V44H53ZM67 49V54H75Q77 54 77 52V51Q77 49 75 49H67ZM53 54Q51 54 51 56V57Q51 59 53 59H61V54H53ZM67 59V64H75Q77 64 77 62V61Q77 59 75 59H67Z\"\n fill=\"white\"\n fill-opacity=\"0.66\"\n />\n </g>\n <g class=\"file-type-label\">\n <rect x=\"27\" y=\"82\" width=\"74\" height=\"28\" rx=\"7\" fill=\"white\" fill-opacity=\"0.96\" />\n <text\n x=\"64\"\n y=\"95\"\n dy=\"0.08em\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n font-family=\"Inter, Arial, sans-serif\"\n font-size=\"19\"\n font-weight=\"700\"\n letter-spacing=\"1\"\n fill=\"#C48612\"\n >\n ZIP\n </text>\n </g>\n </svg>\n }\n }\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -178,7 +178,7 @@ class TabGroup {
|
|
|
178
178
|
const containerEl = this._tabListContainer()?.nativeElement;
|
|
179
179
|
const listEl = this._tabList()?.nativeElement;
|
|
180
180
|
if (containerEl && listEl) {
|
|
181
|
-
const showPaginationControls = listEl.scrollWidth > containerEl.clientWidth;
|
|
181
|
+
const showPaginationControls = listEl.scrollWidth > containerEl.clientWidth + 1;
|
|
182
182
|
if (showPaginationControls !== this._showPaginationControls()) {
|
|
183
183
|
this._showPaginationControls.set(showPaginationControls);
|
|
184
184
|
this._cdr.detectChanges();
|
|
@@ -192,9 +192,10 @@ class TabGroup {
|
|
|
192
192
|
}
|
|
193
193
|
const containerEl = this._tabListContainer()?.nativeElement;
|
|
194
194
|
if (containerEl) {
|
|
195
|
+
const maxScroll = containerEl.scrollWidth - containerEl.clientWidth;
|
|
195
196
|
const scrollLeft = containerEl.scrollLeft;
|
|
196
197
|
const disableScrollBefore = scrollLeft <= 0;
|
|
197
|
-
const disableScrollAfter =
|
|
198
|
+
const disableScrollAfter = scrollLeft >= maxScroll - 1;
|
|
198
199
|
if (disableScrollBefore !== this._disableScrollBefore() || disableScrollAfter !== this._disableScrollAfter()) {
|
|
199
200
|
this._disableScrollBefore.set(disableScrollBefore);
|
|
200
201
|
this._disableScrollAfter.set(disableScrollAfter);
|
|
@@ -357,7 +358,7 @@ class TabGroup {
|
|
|
357
358
|
}
|
|
358
359
|
}
|
|
359
360
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabGroup, isStandalone: true, selector: "ngs-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, preserveContent: { classPropertyName: "preserveContent", publicName: "preserveContent", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "ngs-stretch-tabs", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "ngs-align-tabs", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, enterAnimation: { classPropertyName: "enterAnimation", publicName: "animate.enter", isSignal: true, isRequired: false, transformFunction: null }, leaveAnimation: { classPropertyName: "leaveAnimation", publicName: "animate.leave", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", focusChange: "focusChange" }, host: { properties: { "class.ngs-tab-group-inverted": "headerPosition() === \"below\"", "style.--ngs-tab-group-animation-duration": "animationDuration()" }, classAttribute: "ngs-tab-group" }, queries: [{ propertyName: "_tabs", predicate: Tab, isSignal: true }], viewQueries: [{ propertyName: "_tabLabels", predicate: ["tabLabel"], descendants: true, isSignal: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n (click)=\"_scrollBefore()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n\n <div class=\"ngs-tab-group-header\"\n #tabListContainer\n role=\"tablist\"\n (scroll)=\"_handleScroll()\"\n (keydown)=\"_onKeydown($event)\">\n <div class=\"ngs-tab-group-header-list\" #tabList\n [class.ngs-tab-group-header-list-align-start]=\"alignTabs() === 'start'\"\n [class.ngs-tab-group-header-list-align-center]=\"alignTabs() === 'center'\"\n [class.ngs-tab-group-header-list-align-end]=\"alignTabs() === 'end'\">\n @for (tab of _tabs(); track tab; let i = $index) {\n <div\n #tabLabel\n class=\"ngs-tab-label\"\n role=\"tab\"\n ngsRipple\n [ngsRippleDisabled]=\"tab.disabled() || disableRipple()\"\n [id]=\"'ngs-tab-label-' + i\"\n [attr.aria-controls]=\"'ngs-tab-panel-' + i\"\n [attr.aria-selected]=\"_selectedIndex === i\"\n [attr.aria-disabled]=\"tab.disabled()\"\n [attr.aria-label]=\"tab.ariaLabel()\"\n [attr.aria-labelledby]=\"tab.ariaLabelledby()\"\n [tabIndex]=\"_selectedIndex === i ? 0 : -1\"\n [class.ngs-tab-label-active]=\"_selectedIndex === i\"\n [class.ngs-tab-label-disabled]=\"tab.disabled()\"\n [class.ngs-tab-label-stretched]=\"stretchTabs()\"\n (click)=\"_onTabHeaderClick(i)\"\n >\n @if (tab.templateLabel()) {\n <ng-container [ngTemplateOutlet]=\"tab.templateLabel()!.template\" />\n } @else {\n {{ tab.label() }}\n }\n </div>\n }\n </div>\n </div>\n\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n (click)=\"_scrollAfter()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n</div>\n\n<div class=\"ngs-tab-group-content\">\n <div class=\"ngs-tab-panel-container\">\n @for (tab of _tabs(); track tab; let i = $index) {\n @if (_selectedIndex === i || preserveContent() || _isActive[i]) {\n <div\n class=\"ngs-tab-panel\"\n [class.ngs-tab-panel-active]=\"_selectedIndex === i\"\n [class.ngs-tab-group-enter-left]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-left'\"\n [class.ngs-tab-group-enter-right]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-right'\"\n [class.ngs-tab-group-leave-left]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-left'\"\n [class.ngs-tab-group-leave-right]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-right'\"\n role=\"tabpanel\"\n [id]=\"'ngs-tab-panel-' + i\"\n [attr.aria-labelledby]=\"'ngs-tab-label-' + i\"\n [animate.enter]=\"_getEnterAnimation(i)\"\n [animate.leave]=\"_getLeaveAnimation(i)\"\n >\n <ng-template [cdkPortalOutlet]=\"_getTabContent(tab)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--ngs-color-subtle);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-active-color: var(--ngs-color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--ngs-color-primary);--ngs-tab-label-active-border-top: 2px solid var(--ngs-color-primary);--ngs-tab-label-disabled-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--ngs-color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 0 auto}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--ngs-color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--ngs-color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--ngs-color-outline-variant)}:host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--ngs-color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--ngs-color-outline-variant)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}:host{--ngs-tab-content-padding: 0;--ngs-tab-panel-transition: opacity var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1)}:host .ngs-tab-panel{width:100%;flex-shrink:0;box-sizing:border-box;animation-duration:var(--ngs-tab-group-animation-duration, .5s);animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.35,0,.25,1);position:relative;display:none}:host .ngs-tab-panel.ngs-tab-panel-active,:host .ngs-tab-panel.ngs-tab-group-leave-left,:host .ngs-tab-panel.ngs-tab-group-leave-right,:host .ngs-tab-panel.ngs-tab-group-enter-left,:host .ngs-tab-panel.ngs-tab-group-enter-right{display:block}:host .ngs-tab-panel:not(.ngs-tab-panel-active){position:absolute;top:0;left:0;z-index:1;pointer-events:none}:host .ngs-tab-panel.ngs-tab-panel-active{z-index:2}@keyframes ngs-tab-group-enter-left{0%{transform:translate3d(-100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-enter-right{0%{transform:translate3d(100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-leave-left{0%{transform:none}to{transform:translate3d(-100%,0,0)}}@keyframes ngs-tab-group-leave-right{0%{transform:none}to{transform:translate3d(100%,0,0)}}:host .ngs-tab-group-enter-left{animation-name:ngs-tab-group-enter-left}:host .ngs-tab-group-enter-right{animation-name:ngs-tab-group-enter-right}:host .ngs-tab-group-leave-left{animation-name:ngs-tab-group-leave-left}:host .ngs-tab-group-leave-right{animation-name:ngs-tab-group-leave-right}:host .ngs-tab-group-content{padding:var(--ngs-tab-content-padding);overflow:hidden;position:relative;flex-grow:1}:host .ngs-tab-panel-container{display:flex;flex-direction:row;position:relative;overflow:hidden;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabGroup, isStandalone: true, selector: "ngs-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, preserveContent: { classPropertyName: "preserveContent", publicName: "preserveContent", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "ngs-stretch-tabs", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "ngs-align-tabs", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, enterAnimation: { classPropertyName: "enterAnimation", publicName: "animate.enter", isSignal: true, isRequired: false, transformFunction: null }, leaveAnimation: { classPropertyName: "leaveAnimation", publicName: "animate.leave", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", focusChange: "focusChange" }, host: { properties: { "class.ngs-tab-group-inverted": "headerPosition() === \"below\"", "style.--ngs-tab-group-animation-duration": "animationDuration()" }, classAttribute: "ngs-tab-group" }, queries: [{ propertyName: "_tabs", predicate: Tab, isSignal: true }], viewQueries: [{ propertyName: "_tabLabels", predicate: ["tabLabel"], descendants: true, isSignal: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n (click)=\"_scrollBefore()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n\n <div class=\"ngs-tab-group-header\"\n #tabListContainer\n role=\"tablist\"\n (scroll)=\"_handleScroll()\"\n (keydown)=\"_onKeydown($event)\">\n <div class=\"ngs-tab-group-header-list\" #tabList\n [class.ngs-tab-group-header-list-align-start]=\"alignTabs() === 'start'\"\n [class.ngs-tab-group-header-list-align-center]=\"alignTabs() === 'center'\"\n [class.ngs-tab-group-header-list-align-end]=\"alignTabs() === 'end'\">\n @for (tab of _tabs(); track tab; let i = $index) {\n <div\n #tabLabel\n class=\"ngs-tab-label\"\n role=\"tab\"\n ngsRipple\n [ngsRippleDisabled]=\"tab.disabled() || disableRipple()\"\n [id]=\"'ngs-tab-label-' + i\"\n [attr.aria-controls]=\"'ngs-tab-panel-' + i\"\n [attr.aria-selected]=\"_selectedIndex === i\"\n [attr.aria-disabled]=\"tab.disabled()\"\n [attr.aria-label]=\"tab.ariaLabel()\"\n [attr.aria-labelledby]=\"tab.ariaLabelledby()\"\n [tabIndex]=\"_selectedIndex === i ? 0 : -1\"\n [class.ngs-tab-label-active]=\"_selectedIndex === i\"\n [class.ngs-tab-label-disabled]=\"tab.disabled()\"\n [class.ngs-tab-label-stretched]=\"stretchTabs()\"\n (click)=\"_onTabHeaderClick(i)\"\n >\n @if (tab.templateLabel()) {\n <ng-container [ngTemplateOutlet]=\"tab.templateLabel()!.template\" />\n } @else {\n {{ tab.label() }}\n }\n </div>\n }\n </div>\n </div>\n\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n (click)=\"_scrollAfter()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n</div>\n\n<div class=\"ngs-tab-group-content\">\n <div class=\"ngs-tab-panel-container\">\n @for (tab of _tabs(); track tab; let i = $index) {\n @if (_selectedIndex === i || preserveContent() || _isActive[i]) {\n <div\n class=\"ngs-tab-panel\"\n [class.ngs-tab-panel-active]=\"_selectedIndex === i\"\n [class.ngs-tab-group-enter-left]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-left'\"\n [class.ngs-tab-group-enter-right]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-right'\"\n [class.ngs-tab-group-leave-left]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-left'\"\n [class.ngs-tab-group-leave-right]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-right'\"\n role=\"tabpanel\"\n [id]=\"'ngs-tab-panel-' + i\"\n [attr.aria-labelledby]=\"'ngs-tab-label-' + i\"\n [animate.enter]=\"_getEnterAnimation(i)\"\n [animate.leave]=\"_getLeaveAnimation(i)\"\n >\n <ng-template [cdkPortalOutlet]=\"_getTabContent(tab)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--ngs-color-border);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-active-color: var(--ngs-color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--ngs-color-primary);--ngs-tab-label-active-border-top: 2px solid var(--ngs-color-primary);--ngs-tab-label-disabled-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);--ngs-tab-group-pagination-control-before-border-right: 1px solid var(--ngs-color-border);--ngs-tab-group-pagination-control-after-border-left: 1px solid var(--ngs-color-border);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--ngs-color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--ngs-color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;flex:0 0 auto;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:var(--ngs-tab-group-pagination-control-before-border-right)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:var(--ngs-tab-group-pagination-control-before-border-right)}:host .ngs-tab-group-pagination-control-after{border-left:var(--ngs-tab-group-pagination-control-after-border-left)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:var(--ngs-tab-group-pagination-control-after-border-left)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}:host{--ngs-tab-content-padding: 0;--ngs-tab-panel-transition: opacity var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1)}:host .ngs-tab-panel{width:100%;flex-shrink:0;box-sizing:border-box;animation-duration:var(--ngs-tab-group-animation-duration, .5s);animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.35,0,.25,1);position:relative;display:none}:host .ngs-tab-panel.ngs-tab-panel-active,:host .ngs-tab-panel.ngs-tab-group-leave-left,:host .ngs-tab-panel.ngs-tab-group-leave-right,:host .ngs-tab-panel.ngs-tab-group-enter-left,:host .ngs-tab-panel.ngs-tab-group-enter-right{display:block}:host .ngs-tab-panel:not(.ngs-tab-panel-active){position:absolute;top:0;left:0;z-index:1;pointer-events:none}:host .ngs-tab-panel.ngs-tab-panel-active{z-index:2}@keyframes ngs-tab-group-enter-left{0%{transform:translate3d(-100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-enter-right{0%{transform:translate3d(100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-leave-left{0%{transform:none}to{transform:translate3d(-100%,0,0)}}@keyframes ngs-tab-group-leave-right{0%{transform:none}to{transform:translate3d(100%,0,0)}}:host .ngs-tab-group-enter-left{animation-name:ngs-tab-group-enter-left}:host .ngs-tab-group-enter-right{animation-name:ngs-tab-group-enter-right}:host .ngs-tab-group-leave-left{animation-name:ngs-tab-group-leave-left}:host .ngs-tab-group-leave-right{animation-name:ngs-tab-group-leave-right}:host .ngs-tab-group-content{padding:var(--ngs-tab-content-padding);overflow:hidden;position:relative;flex-grow:1}:host .ngs-tab-panel-container{display:flex;flex-direction:row;position:relative;overflow:hidden;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
361
362
|
}
|
|
362
363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabGroup, decorators: [{
|
|
363
364
|
type: Component,
|
|
@@ -365,7 +366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
365
366
|
'class': 'ngs-tab-group',
|
|
366
367
|
'[class.ngs-tab-group-inverted]': 'headerPosition() === "below"',
|
|
367
368
|
'[style.--ngs-tab-group-animation-duration]': 'animationDuration()',
|
|
368
|
-
}, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n (click)=\"_scrollBefore()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n\n <div class=\"ngs-tab-group-header\"\n #tabListContainer\n role=\"tablist\"\n (scroll)=\"_handleScroll()\"\n (keydown)=\"_onKeydown($event)\">\n <div class=\"ngs-tab-group-header-list\" #tabList\n [class.ngs-tab-group-header-list-align-start]=\"alignTabs() === 'start'\"\n [class.ngs-tab-group-header-list-align-center]=\"alignTabs() === 'center'\"\n [class.ngs-tab-group-header-list-align-end]=\"alignTabs() === 'end'\">\n @for (tab of _tabs(); track tab; let i = $index) {\n <div\n #tabLabel\n class=\"ngs-tab-label\"\n role=\"tab\"\n ngsRipple\n [ngsRippleDisabled]=\"tab.disabled() || disableRipple()\"\n [id]=\"'ngs-tab-label-' + i\"\n [attr.aria-controls]=\"'ngs-tab-panel-' + i\"\n [attr.aria-selected]=\"_selectedIndex === i\"\n [attr.aria-disabled]=\"tab.disabled()\"\n [attr.aria-label]=\"tab.ariaLabel()\"\n [attr.aria-labelledby]=\"tab.ariaLabelledby()\"\n [tabIndex]=\"_selectedIndex === i ? 0 : -1\"\n [class.ngs-tab-label-active]=\"_selectedIndex === i\"\n [class.ngs-tab-label-disabled]=\"tab.disabled()\"\n [class.ngs-tab-label-stretched]=\"stretchTabs()\"\n (click)=\"_onTabHeaderClick(i)\"\n >\n @if (tab.templateLabel()) {\n <ng-container [ngTemplateOutlet]=\"tab.templateLabel()!.template\" />\n } @else {\n {{ tab.label() }}\n }\n </div>\n }\n </div>\n </div>\n\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n (click)=\"_scrollAfter()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n</div>\n\n<div class=\"ngs-tab-group-content\">\n <div class=\"ngs-tab-panel-container\">\n @for (tab of _tabs(); track tab; let i = $index) {\n @if (_selectedIndex === i || preserveContent() || _isActive[i]) {\n <div\n class=\"ngs-tab-panel\"\n [class.ngs-tab-panel-active]=\"_selectedIndex === i\"\n [class.ngs-tab-group-enter-left]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-left'\"\n [class.ngs-tab-group-enter-right]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-right'\"\n [class.ngs-tab-group-leave-left]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-left'\"\n [class.ngs-tab-group-leave-right]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-right'\"\n role=\"tabpanel\"\n [id]=\"'ngs-tab-panel-' + i\"\n [attr.aria-labelledby]=\"'ngs-tab-label-' + i\"\n [animate.enter]=\"_getEnterAnimation(i)\"\n [animate.leave]=\"_getLeaveAnimation(i)\"\n >\n <ng-template [cdkPortalOutlet]=\"_getTabContent(tab)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--ngs-color-subtle);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-active-color: var(--ngs-color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--ngs-color-primary);--ngs-tab-label-active-border-top: 2px solid var(--ngs-color-primary);--ngs-tab-label-disabled-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--ngs-color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 0 auto}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--ngs-color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--ngs-color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--ngs-color-outline-variant)}:host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--ngs-color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--ngs-color-outline-variant)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}:host{--ngs-tab-content-padding: 0;--ngs-tab-panel-transition: opacity var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1)}:host .ngs-tab-panel{width:100%;flex-shrink:0;box-sizing:border-box;animation-duration:var(--ngs-tab-group-animation-duration, .5s);animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.35,0,.25,1);position:relative;display:none}:host .ngs-tab-panel.ngs-tab-panel-active,:host .ngs-tab-panel.ngs-tab-group-leave-left,:host .ngs-tab-panel.ngs-tab-group-leave-right,:host .ngs-tab-panel.ngs-tab-group-enter-left,:host .ngs-tab-panel.ngs-tab-group-enter-right{display:block}:host .ngs-tab-panel:not(.ngs-tab-panel-active){position:absolute;top:0;left:0;z-index:1;pointer-events:none}:host .ngs-tab-panel.ngs-tab-panel-active{z-index:2}@keyframes ngs-tab-group-enter-left{0%{transform:translate3d(-100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-enter-right{0%{transform:translate3d(100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-leave-left{0%{transform:none}to{transform:translate3d(-100%,0,0)}}@keyframes ngs-tab-group-leave-right{0%{transform:none}to{transform:translate3d(100%,0,0)}}:host .ngs-tab-group-enter-left{animation-name:ngs-tab-group-enter-left}:host .ngs-tab-group-enter-right{animation-name:ngs-tab-group-enter-right}:host .ngs-tab-group-leave-left{animation-name:ngs-tab-group-leave-left}:host .ngs-tab-group-leave-right{animation-name:ngs-tab-group-leave-right}:host .ngs-tab-group-content{padding:var(--ngs-tab-content-padding);overflow:hidden;position:relative;flex-grow:1}:host .ngs-tab-panel-container{display:flex;flex-direction:row;position:relative;overflow:hidden;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
369
|
+
}, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n (click)=\"_scrollBefore()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n\n <div class=\"ngs-tab-group-header\"\n #tabListContainer\n role=\"tablist\"\n (scroll)=\"_handleScroll()\"\n (keydown)=\"_onKeydown($event)\">\n <div class=\"ngs-tab-group-header-list\" #tabList\n [class.ngs-tab-group-header-list-align-start]=\"alignTabs() === 'start'\"\n [class.ngs-tab-group-header-list-align-center]=\"alignTabs() === 'center'\"\n [class.ngs-tab-group-header-list-align-end]=\"alignTabs() === 'end'\">\n @for (tab of _tabs(); track tab; let i = $index) {\n <div\n #tabLabel\n class=\"ngs-tab-label\"\n role=\"tab\"\n ngsRipple\n [ngsRippleDisabled]=\"tab.disabled() || disableRipple()\"\n [id]=\"'ngs-tab-label-' + i\"\n [attr.aria-controls]=\"'ngs-tab-panel-' + i\"\n [attr.aria-selected]=\"_selectedIndex === i\"\n [attr.aria-disabled]=\"tab.disabled()\"\n [attr.aria-label]=\"tab.ariaLabel()\"\n [attr.aria-labelledby]=\"tab.ariaLabelledby()\"\n [tabIndex]=\"_selectedIndex === i ? 0 : -1\"\n [class.ngs-tab-label-active]=\"_selectedIndex === i\"\n [class.ngs-tab-label-disabled]=\"tab.disabled()\"\n [class.ngs-tab-label-stretched]=\"stretchTabs()\"\n (click)=\"_onTabHeaderClick(i)\"\n >\n @if (tab.templateLabel()) {\n <ng-container [ngTemplateOutlet]=\"tab.templateLabel()!.template\" />\n } @else {\n {{ tab.label() }}\n }\n </div>\n }\n </div>\n </div>\n\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n (click)=\"_scrollAfter()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n</div>\n\n<div class=\"ngs-tab-group-content\">\n <div class=\"ngs-tab-panel-container\">\n @for (tab of _tabs(); track tab; let i = $index) {\n @if (_selectedIndex === i || preserveContent() || _isActive[i]) {\n <div\n class=\"ngs-tab-panel\"\n [class.ngs-tab-panel-active]=\"_selectedIndex === i\"\n [class.ngs-tab-group-enter-left]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-left'\"\n [class.ngs-tab-group-enter-right]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-right'\"\n [class.ngs-tab-group-leave-left]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-left'\"\n [class.ngs-tab-group-leave-right]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-right'\"\n role=\"tabpanel\"\n [id]=\"'ngs-tab-panel-' + i\"\n [attr.aria-labelledby]=\"'ngs-tab-label-' + i\"\n [animate.enter]=\"_getEnterAnimation(i)\"\n [animate.leave]=\"_getLeaveAnimation(i)\"\n >\n <ng-template [cdkPortalOutlet]=\"_getTabContent(tab)\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--ngs-color-border);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-active-color: var(--ngs-color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--ngs-color-primary);--ngs-tab-label-active-border-top: 2px solid var(--ngs-color-primary);--ngs-tab-label-disabled-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);--ngs-tab-group-pagination-control-before-border-right: 1px solid var(--ngs-color-border);--ngs-tab-group-pagination-control-after-border-left: 1px solid var(--ngs-color-border);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--ngs-color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--ngs-color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;flex:0 0 auto;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:var(--ngs-tab-group-pagination-control-before-border-right)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:var(--ngs-tab-group-pagination-control-before-border-right)}:host .ngs-tab-group-pagination-control-after{border-left:var(--ngs-tab-group-pagination-control-after-border-left)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:var(--ngs-tab-group-pagination-control-after-border-left)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}:host{--ngs-tab-content-padding: 0;--ngs-tab-panel-transition: opacity var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1)}:host .ngs-tab-panel{width:100%;flex-shrink:0;box-sizing:border-box;animation-duration:var(--ngs-tab-group-animation-duration, .5s);animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.35,0,.25,1);position:relative;display:none}:host .ngs-tab-panel.ngs-tab-panel-active,:host .ngs-tab-panel.ngs-tab-group-leave-left,:host .ngs-tab-panel.ngs-tab-group-leave-right,:host .ngs-tab-panel.ngs-tab-group-enter-left,:host .ngs-tab-panel.ngs-tab-group-enter-right{display:block}:host .ngs-tab-panel:not(.ngs-tab-panel-active){position:absolute;top:0;left:0;z-index:1;pointer-events:none}:host .ngs-tab-panel.ngs-tab-panel-active{z-index:2}@keyframes ngs-tab-group-enter-left{0%{transform:translate3d(-100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-enter-right{0%{transform:translate3d(100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-leave-left{0%{transform:none}to{transform:translate3d(-100%,0,0)}}@keyframes ngs-tab-group-leave-right{0%{transform:none}to{transform:translate3d(100%,0,0)}}:host .ngs-tab-group-enter-left{animation-name:ngs-tab-group-enter-left}:host .ngs-tab-group-enter-right{animation-name:ngs-tab-group-enter-right}:host .ngs-tab-group-leave-left{animation-name:ngs-tab-group-leave-left}:host .ngs-tab-group-leave-right{animation-name:ngs-tab-group-leave-right}:host .ngs-tab-group-content{padding:var(--ngs-tab-content-padding);overflow:hidden;position:relative;flex-grow:1}:host .ngs-tab-panel-container{display:flex;flex-direction:row;position:relative;overflow:hidden;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
369
370
|
}], ctorParameters: () => [], propDecorators: { _tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Tab), { isSignal: true }] }], _tabLabels: [{ type: i0.ViewChildren, args: ['tabLabel', { isSignal: true }] }], _tabListContainer: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], _tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], preserveContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveContent", required: false }] }], stretchTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngs-stretch-tabs", required: false }] }], alignTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngs-align-tabs", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], enterAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate.enter", required: false }] }], leaveAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate.leave", required: false }] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], selectedTabChange: [{ type: i0.Output, args: ["selectedTabChange"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }] } });
|
|
370
371
|
|
|
371
372
|
class TabLink {
|
|
@@ -553,13 +554,13 @@ class TabNavBar {
|
|
|
553
554
|
this._disableScrollAfter.set(container.scrollLeft >= maxScroll);
|
|
554
555
|
}
|
|
555
556
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabNavBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
556
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabNavBar, isStandalone: true, selector: "ngs-tab-nav-bar, [ngs-tab-nav-bar]", inputs: { tabPanel: { classPropertyName: "tabPanel", publicName: "tabPanel", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, activator: { classPropertyName: "activator", publicName: "activator", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-tab-nav-bar" }, queries: [{ propertyName: "_links", predicate: TabLink, isSignal: true }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], exportAs: ["ngsTabNavBar"], ngImport: i0, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n (click)=\"_scrollBefore()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n\n <div class=\"ngs-tab-group-header\"\n #tabListContainer\n (scroll)=\"_handleScroll()\">\n <div class=\"ngs-tab-group-header-list\" #tabList>\n <ng-content select=\"a[ngs-tab-link]\"/>\n </div>\n </div>\n\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n (click)=\"_scrollAfter()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--ngs-color-
|
|
557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabNavBar, isStandalone: true, selector: "ngs-tab-nav-bar, [ngs-tab-nav-bar]", inputs: { tabPanel: { classPropertyName: "tabPanel", publicName: "tabPanel", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, activator: { classPropertyName: "activator", publicName: "activator", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-tab-nav-bar" }, queries: [{ propertyName: "_links", predicate: TabLink, isSignal: true }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], exportAs: ["ngsTabNavBar"], ngImport: i0, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n (click)=\"_scrollBefore()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n\n <div class=\"ngs-tab-group-header\"\n #tabListContainer\n (scroll)=\"_handleScroll()\">\n <div class=\"ngs-tab-group-header-list\" #tabList>\n <ng-content select=\"a[ngs-tab-link]\"/>\n </div>\n </div>\n\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n (click)=\"_scrollAfter()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--ngs-color-border);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-active-color: var(--ngs-color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--ngs-color-primary);--ngs-tab-label-active-border-top: 2px solid var(--ngs-color-primary);--ngs-tab-label-disabled-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);--ngs-tab-group-pagination-control-before-border-right: 1px solid var(--ngs-color-border);--ngs-tab-group-pagination-control-after-border-left: 1px solid var(--ngs-color-border);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--ngs-color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--ngs-color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;flex:0 0 auto;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:var(--ngs-tab-group-pagination-control-before-border-right)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:var(--ngs-tab-group-pagination-control-before-border-right)}:host .ngs-tab-group-pagination-control-after{border-left:var(--ngs-tab-group-pagination-control-after-border-left)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:var(--ngs-tab-group-pagination-control-after-border-left)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
557
558
|
}
|
|
558
559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabNavBar, decorators: [{
|
|
559
560
|
type: Component,
|
|
560
561
|
args: [{ selector: 'ngs-tab-nav-bar, [ngs-tab-nav-bar]', exportAs: 'ngsTabNavBar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
561
562
|
'class': 'ngs-tab-nav-bar'
|
|
562
|
-
}, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n (click)=\"_scrollBefore()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n\n <div class=\"ngs-tab-group-header\"\n #tabListContainer\n (scroll)=\"_handleScroll()\">\n <div class=\"ngs-tab-group-header-list\" #tabList>\n <ng-content select=\"a[ngs-tab-link]\"/>\n </div>\n </div>\n\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n (click)=\"_scrollAfter()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--ngs-color-
|
|
563
|
+
}, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n (click)=\"_scrollBefore()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n\n <div class=\"ngs-tab-group-header\"\n #tabListContainer\n (scroll)=\"_handleScroll()\">\n <div class=\"ngs-tab-group-header-list\" #tabList>\n <ng-content select=\"a[ngs-tab-link]\"/>\n </div>\n </div>\n\n @if (_showPaginationControls()) {\n <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n (click)=\"_scrollAfter()\"\n type=\"button\"\n aria-hidden=\"true\">\n <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n </button>\n }\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--ngs-color-border);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-active-color: var(--ngs-color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--ngs-color-primary);--ngs-tab-label-active-border-top: 2px solid var(--ngs-color-primary);--ngs-tab-label-disabled-color: var(--ngs-color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);--ngs-tab-group-pagination-control-before-border-right: 1px solid var(--ngs-color-border);--ngs-tab-group-pagination-control-after-border-left: 1px solid var(--ngs-color-border);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--ngs-color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--ngs-color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;flex:0 0 auto;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:var(--ngs-tab-group-pagination-control-before-border-right)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:var(--ngs-tab-group-pagination-control-before-border-right)}:host .ngs-tab-group-pagination-control-after{border-left:var(--ngs-tab-group-pagination-control-after-border-left)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:var(--ngs-tab-group-pagination-control-after-border-left)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
563
564
|
}], ctorParameters: () => [], propDecorators: { _links: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabLink), { isSignal: true }] }], _tabListContainer: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], _tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], tabPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabPanel", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], activator: [{ type: i0.Input, args: [{ isSignal: true, alias: "activator", required: false }] }] } });
|
|
564
565
|
|
|
565
566
|
let nextUniqueId = 0;
|