@tekus/design-system 5.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/tekus-design-system-components-typography.mjs +2 -2
- package/fesm2022/tekus-design-system-components-typography.mjs.map +1 -1
- package/package.json +11 -39
- package/tokens/index.scss +0 -1
- package/components/dropdown-list/index.d.ts +0 -5
- package/components/dropdown-list/public-api.d.ts +0 -1
- package/components/dropdown-list/src/dropdown-list.component.d.ts +0 -113
- package/components/forms/form-autocomplete-field/index.d.ts +0 -5
- package/components/forms/form-autocomplete-field/public-api.d.ts +0 -1
- package/components/forms/form-autocomplete-field/src/form-autocomplete-field.component.d.ts +0 -173
- package/components/forms/form-chips-autocomplete-field/index.d.ts +0 -5
- package/components/forms/form-chips-autocomplete-field/public-api.d.ts +0 -1
- package/components/forms/form-chips-autocomplete-field/src/form-chips-autocomplete-field.component.d.ts +0 -124
- package/components/forms/form-input-field/index.d.ts +0 -5
- package/components/forms/form-input-field/public-api.d.ts +0 -1
- package/components/forms/form-input-field/src/form-input-field.component.d.ts +0 -137
- package/components/forms/index.d.ts +0 -5
- package/components/forms/public-api.d.ts +0 -3
- package/components/search-bar/index.d.ts +0 -5
- package/components/search-bar/public-api.d.ts +0 -1
- package/components/search-bar/src/search-bar.component.d.ts +0 -25
- package/fesm2022/tekus-design-system-components-dropdown-list.mjs +0 -147
- package/fesm2022/tekus-design-system-components-dropdown-list.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-forms-form-autocomplete-field.mjs +0 -268
- package/fesm2022/tekus-design-system-components-forms-form-autocomplete-field.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-forms-form-chips-autocomplete-field.mjs +0 -193
- package/fesm2022/tekus-design-system-components-forms-form-chips-autocomplete-field.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-forms-form-input-field.mjs +0 -212
- package/fesm2022/tekus-design-system-components-forms-form-input-field.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-forms.mjs +0 -640
- package/fesm2022/tekus-design-system-components-forms.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-search-bar.mjs +0 -56
- package/fesm2022/tekus-design-system-components-search-bar.mjs.map +0 -1
- package/fesm2022/tekus-design-system-services-design-tokens.mjs +0 -47
- package/fesm2022/tekus-design-system-services-design-tokens.mjs.map +0 -1
- package/fesm2022/tekus-design-system-services-typography.mjs +0 -91
- package/fesm2022/tekus-design-system-services-typography.mjs.map +0 -1
- package/services/design-tokens/index.d.ts +0 -5
- package/services/design-tokens/public-api.d.ts +0 -1
- package/services/design-tokens/src/design-tokens.service.d.ts +0 -10
- package/services/typography/index.d.ts +0 -5
- package/services/typography/public-api.d.ts +0 -1
- package/services/typography/src/typography.service.d.ts +0 -8
- package/tokens/typography/_typography.scss +0 -6
- package/tokens/typography/font-size/_font-size.scss +0 -16
- package/tokens/typography/font-weight/_font-weight.scss +0 -14
- package/tokens/typography/letter-spacing/_letter-spacing.scss +0 -12
- package/tokens/typography/line-height/_line-height.scss +0 -16
- package/tokens/typography/variants/_variants.scss +0 -211
|
@@ -11,11 +11,11 @@ class TypographyComponent {
|
|
|
11
11
|
this.lineBreak = false;
|
|
12
12
|
}
|
|
13
13
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TypographyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TypographyComponent, isStandalone: true, selector: "tk-typography", inputs: { size: "size", color: "color", weight: "weight", type: "type", lineBreak: "lineBreak" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <h1\n *ngSwitchCase=\"'h1-heading'\"\n class=\"general h1-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h1>\n <h2\n *ngSwitchCase=\"'h2-heading'\"\n class=\"general h2-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h2>\n <h3\n *ngSwitchCase=\"'h3-heading'\"\n class=\"general h3-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h4\n *ngSwitchCase=\"'h4-heading'\"\n class=\"general h4-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h4>\n <h5\n *ngSwitchCase=\"'h5-heading'\"\n class=\"general h5-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h5>\n <h6\n *ngSwitchCase=\"'h6-heading'\"\n class=\"general h6-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h6>\n <h3\n *ngSwitchCase=\"'subtitle1'\"\n class=\"general subtitle1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h3\n *ngSwitchCase=\"'subtitle2'\"\n class=\"general subtitle2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <p\n *ngSwitchCase=\"'body1'\"\n class=\"general body1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'body2'\"\n class=\"general body2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'p1-paragraph'\"\n class=\"general p1-paragraph\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'underline-text'\"\n class=\"general underline-text\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchDefault\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n</ng-container>\n\n<ng-template #text>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["html{--tk-font-weight-light: 200;--tk-font-weight-book: 300;--tk-font-weight-regular: 400;--tk-font-weight-medium: 500;--tk-font-weight-semi-bold: 600;--tk-font-weight-bold: 700;--tk-font-weight-extra-bold: 800}html{--tk-font-size-xl: 32px;--tk-font-size-lg: 28px;--tk-font-size-md: 24px;--tk-font-size-sm: 20px;--tk-font-size-xs: 18px;--tk-font-size-2xs: 16px;--tk-font-size-3xs: 14px;--tk-font-size-4xs: 12px;--tk-font-size-5xs: 10px}html{--tk-line-height-xl: 48px;--tk-line-height-lg: 42px;--tk-line-height-md: 36px;--tk-line-height-sm: 30px;--tk-line-height-xs: 27px;--tk-line-height-2xs: 24px;--tk-line-height-3xs: 21px;--tk-line-height-4xs: 18px;--tk-line-height-5xs: 15px}html{--tk-letter-spacing-tight: -1px;--tk-letter-spacing-normal: 0px;--tk-letter-spacing-relaxed: 1px;--tk-letter-spacing-wide: 2px;--tk-letter-spacing-extra-wide: 3px}h1{font-family:poppins,sans-serif;font-size:var(--tk-font-size-xl, 32px);line-height:var(--tk-line-height-xl, 48px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h2{font-family:poppins,sans-serif;font-size:var(--tk-font-size-lg, 28px);line-height:var(--tk-line-height-lg, 42px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h3{font-family:poppins,sans-serif;font-size:var(--tk-font-size-md, 24px);line-height:var(--tk-line-height-md, 36px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h4{font-family:poppins,sans-serif;font-size:var(--tk-font-size-sm, 20px);line-height:var(--tk-line-height-sm, 30px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h5{font-family:poppins,sans-serif;font-size:var(--tk-font-size-xs, 18px);line-height:var(--tk-line-height-xs, 27px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h6{font-family:poppins,sans-serif;font-size:var(--tk-font-size-2xs, 16px);line-height:var(--tk-line-height-2xs, 24px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}p[body-1]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-xs, 18px);line-height:var(--tk-line-height-xs, 27px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}p[body-2]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-2xs, 16px);line-height:var(--tk-line-height-2xs, 24px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}p[body-3],a[link-1]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-3xs, 14px);line-height:var(--tk-line-height-3xs, 21px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}a[link-2]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-4xs, 12px);line-height:var(--tk-line-height-4xs, 18px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}p[legal]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-5xs, 10px);line-height:var(--tk-line-height-5xs, 15px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h1[weight=light],h2[weight=light],h3[weight=light],h4[weight=light],h5[weight=light],h6[weight=light],p[body-1][weight=light],p[body-2][weight=light],p[body-3][weight=light],a[link-1][weight=light],a[link-2][weight=light],p[legal][weight=light]{font-weight:var(--tk-font-weight-light)}h1[weight=regular],h2[weight=regular],h3[weight=regular],h4[weight=regular],h5[weight=regular],h6[weight=regular],p[body-1][weight=regular],p[body-2][weight=regular],p[body-3][weight=regular],a[link-1][weight=regular],a[link-2][weight=regular],p[legal][weight=regular]{font-weight:var(--tk-font-weight-regular)}h1[weight=medium],h2[weight=medium],h3[weight=medium],h4[weight=medium],h5[weight=medium],h6[weight=medium],p[body-1][weight=medium],p[body-2][weight=medium],p[body-3][weight=medium],a[link-1][weight=medium],a[link-2][weight=medium],p[legal][weight=medium]{font-weight:var(--tk-font-weight-medium)}h1[weight=semi-bold],h2[weight=semi-bold],h3[weight=semi-bold],h4[weight=semi-bold],h5[weight=semi-bold],h6[weight=semi-bold],p[body-1][weight=semi-bold],p[body-2][weight=semi-bold],p[body-3][weight=semi-bold],a[link-1][weight=semi-bold],a[link-2][weight=semi-bold],p[legal][weight=semi-bold]{font-weight:var(--tk-font-weight-semi-bold)}h1[weight=bold],h2[weight=bold],h3[weight=bold],h4[weight=bold],h5[weight=bold],h6[weight=bold],p[body-1][weight=bold],p[body-2][weight=bold],p[body-3][weight=bold],a[link-1][weight=bold],a[link-2][weight=bold],p[legal][weight=bold]{font-weight:var(--tk-font-weight-bold)}h1[weight=extra-bold],h2[weight=extra-bold],h3[weight=extra-bold],h4[weight=extra-bold],h5[weight=extra-bold],h6[weight=extra-bold],p[body-1][weight=extra-bold],p[body-2][weight=extra-bold],p[body-3][weight=extra-bold],a[link-1][weight=extra-bold],a[link-2][weight=extra-bold],p[legal][weight=extra-bold]{font-weight:var(--tk-font-weight-extra-bold)}a[link-1][underline],a[link-2][underline]{text-decoration:underline}h1[color=primary]{color:var(--tk-color-primary-500, #6ad0bc)}h2[color=secondary]{color:var(--tk-color-secondary-700, #44338b)}html{--tk-color-primary-900: #375f57;--tk-color-primary-800: #467c71;--tk-color-primary-700: #4f9385;--tk-color-primary-600: #5bb09f;--tk-color-primary-500: #6ad0bc;--tk-color-primary-400: #87d9c9;--tk-color-primary-300: #a5e2d6;--tk-color-primary-200: #c3ece4;--tk-color-primary-100: #e1f5f1;--tk-color-secondary-900: #16006f;--tk-color-secondary-800: #2b177b;--tk-color-secondary-700: #44338b;--tk-color-secondary-600: #54429d;--tk-color-secondary-500: #7366a8;--tk-color-secondary-400: #8275bb;--tk-color-secondary-300: #a29ac5;--tk-color-secondary-200: #d1cde2;--tk-color-secondary-100: #efeef5;--tk-color-accent-900: #420008;--tk-color-accent-800: #6a000c;--tk-color-accent-700: #8e0d1c;--tk-color-accent-600: #b22535;--tk-color-accent-500: #ce4556;--tk-color-accent-400: #ee707e;--tk-color-accent-300: #f89a9c;--tk-color-accent-200: #fcc2c9;--tk-color-accent-100: #fee6e9;--tk-color-neutral-900: #040303;--tk-color-neutral-800: #333333;--tk-color-neutral-700: #444444;--tk-color-neutral-600: #5b5b5b;--tk-color-neutral-500: #6b6b6b;--tk-color-neutral-400: #9b9b9b;--tk-color-neutral-300: #b3b3b3;--tk-color-neutral-200: #cdcdcd;--tk-color-neutral-100: #f2f2f2;--tk-color-success-900: #004d34;--tk-color-success-800: #0c623e;--tk-color-success-700: #00875b;--tk-color-success-600: #18ae7d;--tk-color-success-500: #36b37e;--tk-color-success-400: #57d9a3;--tk-color-success-300: #79f2c0;--tk-color-success-200: #abf5d1;--tk-color-success-100: #e3fcef;--tk-color-danger-900: #950700;--tk-color-danger-800: #af0c1d;--tk-color-danger-700: #cf2604;--tk-color-danger-600: #f43e11;--tk-color-danger-500: #ff6640;--tk-color-danger-400: #ff7f63;--tk-color-danger-300: #ffa28b;--tk-color-danger-200: #fbc2b4;--tk-color-danger-100: #ffddd4;--tk-color-info-900: #01367b;--tk-color-info-800: #01469e;--tk-color-info-700: #0a68e0;--tk-color-info-600: #1c89ff;--tk-color-info-500: #3998ff;--tk-color-info-400: #509dff;--tk-color-info-300: #7bb4fe;--tk-color-info-200: #b3d4ff;--tk-color-info-100: #deebff;--tk-color-warning-900: #ffc55d;--tk-color-warning-800: #ffca6b;--tk-color-warning-700: #ffd07d;--tk-color-warning-600: #ffd68f;--tk-color-warning-500: #ffdc9d;--tk-color-warning-400: #f5dbac;--tk-color-warning-300: #ffe8be;--tk-color-warning-200: #fff3df;--tk-color-warning-100: #fffaf2;--tk-text-default-900: #101820;--tk-text-default-800: #6c6c6c;--tk-text-default-700: #656d76;--tk-text-default-600: #a0a9b4;--tk-text-default-500: #d0d5dd;--tk-border-soft: #eaecf0;--tk-border-error: #de350b;--tk-border-hover: #667085;--tk-border-focused: #6ad0bc;--tk-border-disabled: #d0d5dd;--tk-color-full-black: #101820;--tk-color-full-white: #ffffff}html{--tk-spacing-1: 4px;--tk-spacing-2: 8px;--tk-spacing-3: 12px;--tk-spacing-4: 16px;--tk-spacing-5: 20px;--tk-spacing-6: 24px;--tk-spacing-7: 32px;--tk-spacing-8: 40px;--tk-spacing-9: 48px;--tk-spacing-10: 64px;--tk-spacing-11: 80px;--tk-spacing-12: 96px;--tk-spacing-13: 128px;--tk-spacing-14: 160px;--tk-spacing-15: 192px;--tk-spacing-16: 224px;--tk-spacing-17: 256px}html{--tk-rounded-null: 0;--tk-rounded-scale-01: 2px;--tk-rounded-scale-02: 4px;--tk-rounded-scale-03: 8px;--tk-rounded-scale-04: 12px;--tk-rounded-scale-05: 16px;--tk-rounded-scale-10: 100%}html{--tk-low-blur-small: 2px;--tk-low-blur-medium: 4px;--tk-low-blur-large: 10px;--tk-medium-blur-small: 4px;--tk-medium-blur-medium: 8px;--tk-medium-blur-large: 15px;--tk-high-blur-small: 8px;--tk-high-blur-medium: 12px;--tk-high-blur-large: 20px}html{--tk-shadow-small: 2px 2px 4px 0px #cdcdcd26;--tk-shadow-medium: 2px 4px 8px 0px #cdcdcd66;--tk-shadow-large: 0px 4px 8px 0px #cdcdcd99}.color-palette__container{color:var(--tk-color-text, #333);padding:var(--tk-spacing-md, 24px);border:1px solid var(--tk-color-border, #eee);border-radius:var(--tk-border-radius-md, 8px);margin-top:var(--tk-spacing-lg, 32px);box-shadow:var(--tk-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}.color-palette__title{color:var(--tk-color-heading, #222);margin-top:0;margin-bottom:var(--tk-spacing-sm, 16px)}.color-palette__description{font-size:.9em;color:var(--tk-color-text-light, #666);margin-bottom:var(--tk-spacing-md, 24px)}.color-palette__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--tk-spacing-md, 24px)}.color-palette__card{border:1px solid var(--tk-color-border, #e0e0e0);border-radius:var(--tk-border-radius-sm, 8px);padding:var(--tk-spacing-sm, 16px);background-color:var(--tk-color-neutral-100, #f9f9f9);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--tk-shadow-xs, 0 .5px 2px rgba(0, 0, 0, .05));gap:var(--tk-spacing-2);transition:transform .2s ease,box-shadow .2s ease}.color-palette__card:hover{transform:translateY(-2px);box-shadow:var(--tk-shadow-md, 0 2px 6px rgba(0, 0, 0, .15))}.color-palette__swatch{width:100%;height:36px;border-radius:var(--tk-border-radius-xs, 4px);border:1px solid rgba(0,0,0,.1);margin-bottom:var(--tk-spacing-sm, 16px);box-sizing:border-box}.color-palette__token-name{font-weight:700;font-size:14px!important;color:var(--tk-color-text-dark, #333);margin-bottom:5px;word-break:break-all;background:var(--tk-color-full-white);padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02)}.color-palette__token-value{font-size:.9em!important;color:var(--tk-color-text-light, #666);margin-bottom:var(--tk-spacing-sm, 16px);word-break:break-all}.color-palette__message{text-align:center;color:var(--tk-color-text-light, #666);padding:var(--tk-spacing-md, 24px)}.spacing-viewer{display:flex;gap:var(--tk-spacing-2);flex-wrap:wrap;padding:var(--tk-spacing-4)}.spacing-viewer__container{display:flex;flex-wrap:wrap;width:100%;padding:var(--tk-spacing-4);gap:var(--tk-spacing-2) var(--tk-spacing-8);flex-direction:row;border-radius:var(--rounded-scale-03);border:1px solid var(--tk-color-neutral-200, #cdcdcd)}.spacing-viewer__view-space{position:relative;color:var(--tk-color-secondary-700, #6941c6)}.spacing-viewer__view-space--color:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:var(--width);background-color:var(--tk-color-secondary-200, rgba(158, 119, 237, .1019607843));opacity:.5}.spacing-viewer__copy{display:flex;flex-direction:row;gap:var(--tk-spacing-4);align-items:center}.spacing-viewer__suffix{padding:var(--tk-spacing-1);border:1px solid var(--tk-color-neutral-200, #cdcdcd);border-radius:var(--tk-rounded-1, 4px);font-size:12px;cursor:pointer}:host{display:inline-flex;align-items:center;margin-left:var(--tk-spacing-02, 8px)}.copy-button{background:var(--tk-color-full-white, #fff);border:1px solid var(--tk-color-primary-500, #6ad0bc);border-radius:var(--tk-rounded-scale-04, 16px);padding:2px var(--tk-spacing-3, 12px);cursor:pointer;display:inline-flex;align-items:center;font-size:12px;color:var(--tk-color-secondary-900, #16006f);font-weight:500;box-shadow:none;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}.copy-button:hover:not([disabled]){background:var(--tk-color-primary-500, #6ad0bc);color:#fff;border-color:var(--tk-color-primary-500, #6ad0bc)}.copy-button:active{background:#e6f5ee;color:var(--tk-color-secondary-900, #16006f)}.copy-success-message{color:var(--tk-color-primary-500, #6ad0bc);font-weight:500;background:var(--tk-color-full-white, #fff);border-radius:var(--tk-rounded-scale-03, 8px);font-size:12px;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.illustration-doc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:var(--tk-spacing-5) 0;gap:var(--tk-spacing-4)}.illustration-doc__illustration-container{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-3);display:inline-flex;flex-direction:column;gap:var(--tk-spacing-2);justify-content:space-between}.illustration-doc__illustration{width:150px;height:150px}.illustration-doc__illustration svg{object-fit:contain;height:100%;width:100%}.illustration-doc__illustration-name{color:var(--tk-text-default-800);background-color:var(--tk-color-neutral-100);font-size:12px;border-radius:var(--tk-rounded-scale-03);padding:var(--tk-spacing-2)}.illustration-doc__copy-clipboard{text-align:center}.illustration-doc__no-found{color:var(--tk-text-default-700);text-align:center;display:flex;flex-direction:column;align-items:center}.illustration-doc input{margin-bottom:var(--tk-spacing-4);padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);width:100%;font-size:var(--tk-font-size-2, 16px)}.illustration-doc .illustration-doc__illustration-tags{font-size:var(--tk-font-size-2, 10px);color:var(--tk-text-default-600)}.paginator-doc{display:flex;justify-content:flex-end;align-items:center;gap:var(--tk-spacing-2)}.paginator-doc__buttons-nav{padding:var(--tk-spacing-1) var(--tk-spacing-2);font-size:var(--tk-font-size-2, 12px);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft)}.paginator-doc__buttons-text{font-size:var(--tk-font-size-2, 12px)!important;color:var(--tk-text-default-700)}.branding-doc-wrapper{margin:var(--tk-spacing-7) 0!important;padding:var(--tk-spacing-8)!important;max-width:400px;width:fit-content;position:relative}.branding-doc-wrapper.mark-border{border:var(--tk-spacing-8) solid var(--tk-color-danger-100);padding:0!important;margin:var(--tk-spacing-7)!important}.branding-doc-wrapper.mark-border:after{content:\"40px\";position:absolute;left:-40px;top:calc(3px + 100%);height:40px;font-size:12px;border-bottom:2px solid #000;display:flex;align-items:center;padding-left:8px;bottom:0}.branding-doc-wrapper.mark-border:before{content:\"40px\";position:absolute;left:-45px;top:-40px;height:40px;font-size:12px;border-left:2px solid #000;display:flex;align-items:center;padding-left:8px}.dark{background-color:var(--tk-color-neutral-800);color:var(--tk-color-full-white)}.branding-doc-content{height:100px;max-height:100px;width:fit-content}.branding-doc-content svg,.branding-doc-content img{height:100%;max-height:100px;width:100%;object-fit:contain}.branding-doc-content.mark-border:after{content:\"100px\";position:absolute;top:0;right:-90px;display:flex;align-items:center;height:100px;border-left:2px solid;padding-left:8px;font-size:12px}.svg-icon{display:inline-block;width:fit-content}.svg-icon[color=primary]{color:var(--tk-color-primary-500)}.svg-icon[color=secondary]{color:var(--tk-color-secondary-500)}.svg-icon[color=danger]{color:var(--tk-color-danger-500)}.svg-icon[color=warning]{color:var(--tk-color-warning-700)}.svg-icon[color=info]{color:var(--tk-color-info-500)}.svg-icon[color=light]{color:var(--tk-color-full-white)}.svg-icon[disabled=true],.svg-icon[data-disabled=true]{color:var(--tk-color-neutral-500)!important}.svg-icon__cu[size=\"2xs\"],.svg-icon__cu[data-size=\"2xs\"]{font-size:.625em}.svg-icon__cu[size=xs],.svg-icon__cu[data-size=xs]{font-size:.75em}.svg-icon__cu[size=sm],.svg-icon__cu[data-size=sm]{font-size:.875em}.svg-icon__cu[size=lg],.svg-icon__cu[data-size=lg]{font-size:1.25em}.svg-icon__cu[size=xl],.svg-icon__cu[data-size=xl]{font-size:1.5em}.svg-icon__cu[size=\"2xl\"],.svg-icon__cu[data-size=\"2xl\"]{font-size:2em}.svg-icon__cu[size=\"1x\"],.svg-icon__cu[data-size=\"1x\"]{font-size:1em}.svg-icon__cu[size=\"2x\"],.svg-icon__cu[data-size=\"2x\"]{font-size:2em}.svg-icon__cu[size=\"3x\"],.svg-icon__cu[data-size=\"3x\"]{font-size:3em}.svg-icon__cu[size=\"4x\"],.svg-icon__cu[data-size=\"4x\"]{font-size:4em}.svg-icon__cu[size=\"5x\"],.svg-icon__cu[data-size=\"5x\"]{font-size:5em}svg{width:100%;height:100%}.icons-doc{font-family:Poppins,sans-serif}.icons-doc__icon-search{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-2, 8px)}.icons-doc input,.icons-doc select{padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);font-size:var(--tk-font-size-2, 16px);flex:1 1 60%}.icons-doc select{flex:1 1 20%}.icons-doc__container{padding:20px 0}.icons-doc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:var(--tk-spacing-5) 0;gap:var(--tk-spacing-4)}.icons-doc__icon-card{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-3);display:inline-flex;flex-direction:column;gap:var(--tk-spacing-2);justify-content:space-between}.icons-doc__icon-name{color:var(--tk-text-default-800);background-color:var(--tk-color-neutral-100);font-size:12px;border-radius:var(--tk-rounded-scale-03);padding:var(--tk-spacing-2)}.icons-doc__icon-tags{font-size:var(--tk-font-size-2, 10px)!important;color:var(--tk-text-default-600)}.icon-doc-block,.copy-to-clipboard{display:flex;justify-content:center}.icon-colors{display:flex;gap:var(--tk-spacing-2, 8px);flex-direction:row;width:fit-content;padding:var(--tk-spacing-2, 8px);border-radius:var(--tk-rounded-scale-02);align-items:center}.icon-colors--bg-black{background-color:var(--tk-color-neutral-700)}.icon-colors--bg-white{background-color:var(--tk-color-full-white)}.icon-size-block{display:flex;gap:var(--tk-spacing-4, 16px)}.icon-size-block__content{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-5, 20px)}.icon-size{display:flex;gap:var(--tk-spacing-2, 8px);flex-direction:row;width:fit-content;padding:var(--tk-spacing-2, 8px);border-radius:var(--tk-rounded-scale-02);align-items:center}.table-of-content__container{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-4, 16px);min-width:0}.table-of-content__content{flex:1 1 0%;min-width:0;overflow-wrap:anywhere}.table-of-content__toc{position:sticky;top:0;padding:var(--tk-spacing-3, 12px);max-height:100vh;overflow:auto}.grid-container-doc{background-color:var(--tk-color-neutral-100);border-radius:var(--tk-rounded-scale-02);width:100%;min-width:fit-content}.grid-item-doc{border-radius:var(--tk-rounded-scale-01);background-color:var(--tk-color-full-white);padding:var(--tk-spacing-1);min-height:32px}.general{font-family:Poppins,sans-serif;padding:0;margin:0}.h1-heading{font-size:var(--tk-typography-h1-heading-fontSize);font-weight:var(--tk-typography-h1-heading-fontWeight)}.h2-heading{font-size:var(--tk-typography-h2-heading-fontSize);font-weight:var(--tk-typography-h2-heading-fontWeight)}.h3-heading{font-size:var(--tk-typography-h3-heading-fontSize);font-weight:var(--tk-typography-h3-heading-fontWeight)}.h4-heading{font-size:var(--tk-typography-h4-heading-fontSize);font-weight:var(--tk-typography-h4-heading-fontWeight)}.h5-heading{font-size:var(--tk-typography-h5-heading-fontSize);font-weight:var(--tk-typography-h5-heading-fontWeight)}.h6-heading{font-size:var(--tk-typography-h6-heading-fontSize);font-weight:var(--tk-typography-h6-heading-fontWeight)}.subtitle1{font-size:var(--tk-typography-subtitle1-fontSize);font-weight:var(--tk-typography-subtitle1-fontWeight)}.subtitle2{font-size:var(--tk-typography-subtitle2-fontSize);font-weight:var(--tk-typography-subtitle2-fontWeight)}.body1{font-size:var(--tk-typography-body1-fontSize);font-weight:var(--tk-typography-body1-fontWeight)}.body2{font-size:var(--tk-typography-body2-fontSize);font-weight:var(--tk-typography-body2-fontWeight)}.p1-paragraph{font-size:var(--tk-typography-p1-paragraph-fontSize);font-weight:var(--tk-typography-p1-paragraph-fontWeight)}.underline-text{font-size:var(--tk-typography-underline-fontSize);font-weight:var(--tk-typography-underline-fontWeight);text-decoration:\"underline\"}.color-tk-color-primary-900{color:var(--tk-color-primary-900)}.color-tk-color-primary-800{color:var(--tk-color-primary-800)}.color-tk-color-primary-700{color:var(--tk-color-primary-700)}.color-tk-color-primary-600{color:var(--tk-color-primary-600)}.color-tk-color-primary-500{color:var(--tk-color-primary-500)}.color-tk-color-primary-400{color:var(--tk-color-primary-400)}.color-tk-color-primary-300{color:var(--tk-color-primary-300)}.color-tk-color-primary-200{color:var(--tk-color-primary-200)}.color-tk-color-primary-100{color:var(--tk-color-primary-100)}.color-tk-color-primary{color:var(--tk-color-primary-900)}.color-tk-color-secondary-900{color:var(--tk-color-secondary-900)}.color-tk-color-secondary-800{color:var(--tk-color-secondary-800)}.color-tk-color-secondary-700{color:var(--tk-color-secondary-700)}.color-tk-color-secondary-600{color:var(--tk-color-secondary-600)}.color-tk-color-secondary-500{color:var(--tk-color-secondary-500)}.color-tk-color-secondary-400{color:var(--tk-color-secondary-400)}.color-tk-color-secondary-300{color:var(--tk-color-secondary-300)}.color-tk-color-secondary-200{color:var(--tk-color-secondary-200)}.color-tk-color-secondary-100{color:var(--tk-color-secondary-100)}.color-tk-color-secondary{color:var(--tk-color-secondary-900)}.color-tk-color-accent-900{color:var(--tk-color-accent-900)}.color-tk-color-accent-800{color:var(--tk-color-accent-800)}.color-tk-color-accent-700{color:var(--tk-color-accent-700)}.color-tk-color-accent-600{color:var(--tk-color-accent-600)}.color-tk-color-accent-500{color:var(--tk-color-accent-500)}.color-tk-color-accent-400{color:var(--tk-color-accent-400)}.color-tk-color-accent-300{color:var(--tk-color-accent-300)}.color-tk-color-accent-200{color:var(--tk-color-accent-200)}.color-tk-color-accent-100{color:var(--tk-color-accent-100)}.color-tk-color-accent{color:var(--tk-color-accent-500)}.color-tk-color-neutral-900{color:var(--tk-color-neutral-900)}.color-tk-color-neutral-800{color:var(--tk-color-neutral-800)}.color-tk-color-neutral-700{color:var(--tk-color-neutral-700)}.color-tk-color-neutral-600{color:var(--tk-color-neutral-600)}.color-tk-color-neutral-500{color:var(--tk-color-neutral-500)}.color-tk-color-neutral-400{color:var(--tk-color-neutral-400)}.color-tk-color-neutral-300{color:var(--tk-color-neutral-300)}.color-tk-color-neutral-200{color:var(--tk-color-neutral-200)}.color-tk-color-neutral-100{color:var(--tk-color-neutral-100)}.color-tk-color-neutral{color:var(--tk-color-neutral-500)}.color-tk-color-success-900{color:var(--tk-color-success-900)}.color-tk-color-success-800{color:var(--tk-color-success-800)}.color-tk-color-success-700{color:var(--tk-color-success-700)}.color-tk-color-success-600{color:var(--tk-color-success-600)}.color-tk-color-success-500{color:var(--tk-color-success-500)}.color-tk-color-success-400{color:var(--tk-color-success-400)}.color-tk-color-success-300{color:var(--tk-color-success-300)}.color-tk-color-success-200{color:var(--tk-color-success-200)}.color-tk-color-success-100{color:var(--tk-color-success-100)}.color-tk-color-success{color:var(--tk-color-success-500)}.color-tk-color-danger-900{color:var(--tk-color-danger-900)}.color-tk-color-danger-800{color:var(--tk-color-danger-800)}.color-tk-color-danger-700{color:var(--tk-color-danger-700)}.color-tk-color-danger-600{color:var(--tk-color-danger-600)}.color-tk-color-danger-500{color:var(--tk-color-danger-500)}.color-tk-color-danger-400{color:var(--tk-color-danger-400)}.color-tk-color-danger-300{color:var(--tk-color-danger-300)}.color-tk-color-danger-200{color:var(--tk-color-danger-200)}.color-tk-color-danger-100{color:var(--tk-color-danger-100)}.color-tk-color-danger{color:var(--tk-color-danger-500)}.color-tk-color-info-900{color:var(--tk-color-info-900)}.color-tk-color-info-800{color:var(--tk-color-info-800)}.color-tk-color-info-700{color:var(--tk-color-info-700)}.color-tk-color-info-600{color:var(--tk-color-info-600)}.color-tk-color-info-500{color:var(--tk-color-info-500)}.color-tk-color-info-400{color:var(--tk-color-info-400)}.color-tk-color-info-300{color:var(--tk-color-info-300)}.color-tk-color-info-200{color:var(--tk-color-info-200)}.color-tk-color-info-100{color:var(--tk-color-info-100)}.color-tk-color-info{color:var(--tk-color-info-500)}.color-tk-color-warning-900{color:var(--tk-color-warning-900)}.color-tk-color-warning-800{color:var(--tk-color-warning-800)}.color-tk-color-warning-700{color:var(--tk-color-warning-700)}.color-tk-color-warning-600{color:var(--tk-color-warning-600)}.color-tk-color-warning-500{color:var(--tk-color-warning-500)}.color-tk-color-warning-400{color:var(--tk-color-warning-400)}.color-tk-color-warning-300{color:var(--tk-color-warning-300)}.color-tk-color-warning-200{color:var(--tk-color-warning-200)}.color-tk-color-warning-100{color:var(--tk-color-warning-100)}.color-tk-color-warning{color:var(--tk-color-warning-500)}.color-tk-color-white,.color-tk-color-white-900{color:var(--tk-color-white-900)}.color-tk-color-white-800{color:var(--tk-color-white-800)}.color-tk-color-black,.color-tk-color-black-900{color:var(--tk-color-black-900)}.color-tk-color-text-900{color:var(--tk-color-text-900)}.color-tk-color-text-800{color:var(--tk-color-text-800)}.color-tk-color-text-700{color:var(--tk-color-text-700)}.color-tk-color-text-600{color:var(--tk-color-text-600)}.color-tk-color-text-500,.color-tk-color-text{color:var(--tk-color-text-500)}.color-tk-color-text-primary-900{color:var(--tk-color-text-primary-900)}.color-tk-color-text-primary-800{color:var(--tk-color-text-primary-800)}.color-tk-color-text-primary-700{color:var(--tk-color-text-primary-700)}.color-tk-color-text-primary-500{color:var(--tk-color-text-primary-500)}.color-tk-color-text-primary-400{color:var(--tk-color-text-primary-400)}.color-tk-color-text-primary-300{color:var(--tk-color-text-primary-300)}.color-tk-color-text-primary-200{color:var(--tk-color-text-primary-200)}.color-tk-color-text-primary-100{color:var(--tk-color-text-primary-100)}.color-tk-color-text-primary{color:var(--tk-color-text-primary-500)}.color-tk-color-text-secondary-900{color:var(--tk-color-text-secondary-900)}.color-tk-color-text-secondary-800{color:var(--tk-color-text-secondary-800)}.color-tk-color-text-secondary-700{color:var(--tk-color-text-secondary-700)}.color-tk-color-text-secondary-500{color:var(--tk-color-text-secondary-500)}.color-tk-color-text-secondary-400{color:var(--tk-color-text-secondary-400)}.color-tk-color-text-secondary-300{color:var(--tk-color-text-secondary-300)}.color-tk-color-text-secondary-200{color:var(--tk-color-text-secondary-200)}.color-tk-color-text-secondary-100{color:var(--tk-color-text-secondary-100)}.color-tk-color-text-secondary{color:var(--tk-color-text-secondary-500)}.color-tk-color-text-accent-900{color:var(--tk-color-text-accent-900)}.color-tk-color-text-accent-800{color:var(--tk-color-text-accent-800)}.color-tk-color-text-accent-700{color:var(--tk-color-text-accent-700)}.color-tk-color-text-accent-500{color:var(--tk-color-text-accent-500)}.color-tk-color-text-accent-400{color:var(--tk-color-text-accent-400)}.color-tk-color-text-accent-300{color:var(--tk-color-text-accent-300)}.color-tk-color-text-accent-200{color:var(--tk-color-text-accent-200)}.color-tk-color-text-accent-100{color:var(--tk-color-text-accent-100)}.color-tk-color-text-accent{color:var(--tk-color-text-accent-500)}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TypographyComponent, isStandalone: true, selector: "tk-typography", inputs: { size: "size", color: "color", weight: "weight", type: "type", lineBreak: "lineBreak" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <h1\n *ngSwitchCase=\"'h1-heading'\"\n class=\"general h1-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h1>\n <h2\n *ngSwitchCase=\"'h2-heading'\"\n class=\"general h2-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h2>\n <h3\n *ngSwitchCase=\"'h3-heading'\"\n class=\"general h3-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h4\n *ngSwitchCase=\"'h4-heading'\"\n class=\"general h4-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h4>\n <h5\n *ngSwitchCase=\"'h5-heading'\"\n class=\"general h5-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h5>\n <h6\n *ngSwitchCase=\"'h6-heading'\"\n class=\"general h6-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h6>\n <h3\n *ngSwitchCase=\"'subtitle1'\"\n class=\"general subtitle1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h3\n *ngSwitchCase=\"'subtitle2'\"\n class=\"general subtitle2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <p\n *ngSwitchCase=\"'body1'\"\n class=\"general body1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'body2'\"\n class=\"general body2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'p1-paragraph'\"\n class=\"general p1-paragraph\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'underline-text'\"\n class=\"general underline-text\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchDefault\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n</ng-container>\n\n<ng-template #text>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["html{--tk-color-primary-900: #375f57;--tk-color-primary-800: #467c71;--tk-color-primary-700: #4f9385;--tk-color-primary-600: #5bb09f;--tk-color-primary-500: #6ad0bc;--tk-color-primary-400: #87d9c9;--tk-color-primary-300: #a5e2d6;--tk-color-primary-200: #c3ece4;--tk-color-primary-100: #e1f5f1;--tk-color-secondary-900: #16006f;--tk-color-secondary-800: #2b177b;--tk-color-secondary-700: #44338b;--tk-color-secondary-600: #54429d;--tk-color-secondary-500: #7366a8;--tk-color-secondary-400: #8275bb;--tk-color-secondary-300: #a29ac5;--tk-color-secondary-200: #d1cde2;--tk-color-secondary-100: #efeef5;--tk-color-accent-900: #420008;--tk-color-accent-800: #6a000c;--tk-color-accent-700: #8e0d1c;--tk-color-accent-600: #b22535;--tk-color-accent-500: #ce4556;--tk-color-accent-400: #ee707e;--tk-color-accent-300: #f89a9c;--tk-color-accent-200: #fcc2c9;--tk-color-accent-100: #fee6e9;--tk-color-neutral-900: #040303;--tk-color-neutral-800: #333333;--tk-color-neutral-700: #444444;--tk-color-neutral-600: #5b5b5b;--tk-color-neutral-500: #6b6b6b;--tk-color-neutral-400: #9b9b9b;--tk-color-neutral-300: #b3b3b3;--tk-color-neutral-200: #cdcdcd;--tk-color-neutral-100: #f2f2f2;--tk-color-success-900: #004d34;--tk-color-success-800: #0c623e;--tk-color-success-700: #00875b;--tk-color-success-600: #18ae7d;--tk-color-success-500: #36b37e;--tk-color-success-400: #57d9a3;--tk-color-success-300: #79f2c0;--tk-color-success-200: #abf5d1;--tk-color-success-100: #e3fcef;--tk-color-danger-900: #950700;--tk-color-danger-800: #af0c1d;--tk-color-danger-700: #cf2604;--tk-color-danger-600: #f43e11;--tk-color-danger-500: #ff6640;--tk-color-danger-400: #ff7f63;--tk-color-danger-300: #ffa28b;--tk-color-danger-200: #fbc2b4;--tk-color-danger-100: #ffddd4;--tk-color-info-900: #01367b;--tk-color-info-800: #01469e;--tk-color-info-700: #0a68e0;--tk-color-info-600: #1c89ff;--tk-color-info-500: #3998ff;--tk-color-info-400: #509dff;--tk-color-info-300: #7bb4fe;--tk-color-info-200: #b3d4ff;--tk-color-info-100: #deebff;--tk-color-warning-900: #ffc55d;--tk-color-warning-800: #ffca6b;--tk-color-warning-700: #ffd07d;--tk-color-warning-600: #ffd68f;--tk-color-warning-500: #ffdc9d;--tk-color-warning-400: #f5dbac;--tk-color-warning-300: #ffe8be;--tk-color-warning-200: #fff3df;--tk-color-warning-100: #fffaf2;--tk-text-default-900: #101820;--tk-text-default-800: #6c6c6c;--tk-text-default-700: #656d76;--tk-text-default-600: #a0a9b4;--tk-text-default-500: #d0d5dd;--tk-border-soft: #eaecf0;--tk-border-error: #de350b;--tk-border-hover: #667085;--tk-border-focused: #6ad0bc;--tk-border-disabled: #d0d5dd;--tk-color-full-black: #101820;--tk-color-full-white: #ffffff}html{--tk-spacing-1: 4px;--tk-spacing-2: 8px;--tk-spacing-3: 12px;--tk-spacing-4: 16px;--tk-spacing-5: 20px;--tk-spacing-6: 24px;--tk-spacing-7: 32px;--tk-spacing-8: 40px;--tk-spacing-9: 48px;--tk-spacing-10: 64px;--tk-spacing-11: 80px;--tk-spacing-12: 96px;--tk-spacing-13: 128px;--tk-spacing-14: 160px;--tk-spacing-15: 192px;--tk-spacing-16: 224px;--tk-spacing-17: 256px}html{--tk-rounded-null: 0;--tk-rounded-scale-01: 2px;--tk-rounded-scale-02: 4px;--tk-rounded-scale-03: 8px;--tk-rounded-scale-04: 12px;--tk-rounded-scale-05: 16px;--tk-rounded-scale-10: 100%}html{--tk-low-blur-small: 2px;--tk-low-blur-medium: 4px;--tk-low-blur-large: 10px;--tk-medium-blur-small: 4px;--tk-medium-blur-medium: 8px;--tk-medium-blur-large: 15px;--tk-high-blur-small: 8px;--tk-high-blur-medium: 12px;--tk-high-blur-large: 20px}html{--tk-shadow-small: 2px 2px 4px 0px #cdcdcd26;--tk-shadow-medium: 2px 4px 8px 0px #cdcdcd66;--tk-shadow-large: 0px 4px 8px 0px #cdcdcd99}.color-palette__container{color:var(--tk-color-text, #333);padding:var(--tk-spacing-md, 24px);border:1px solid var(--tk-color-border, #eee);border-radius:var(--tk-border-radius-md, 8px);margin-top:var(--tk-spacing-lg, 32px);box-shadow:var(--tk-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}.color-palette__title{color:var(--tk-color-heading, #222);margin-top:0;margin-bottom:var(--tk-spacing-sm, 16px)}.color-palette__description{font-size:.9em;color:var(--tk-color-text-light, #666);margin-bottom:var(--tk-spacing-md, 24px)}.color-palette__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--tk-spacing-md, 24px)}.color-palette__card{border:1px solid var(--tk-color-border, #e0e0e0);border-radius:var(--tk-border-radius-sm, 8px);padding:var(--tk-spacing-sm, 16px);background-color:var(--tk-color-neutral-100, #f9f9f9);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--tk-shadow-xs, 0 .5px 2px rgba(0, 0, 0, .05));gap:var(--tk-spacing-2);transition:transform .2s ease,box-shadow .2s ease}.color-palette__card:hover{transform:translateY(-2px);box-shadow:var(--tk-shadow-md, 0 2px 6px rgba(0, 0, 0, .15))}.color-palette__swatch{width:100%;height:36px;border-radius:var(--tk-border-radius-xs, 4px);border:1px solid rgba(0,0,0,.1);margin-bottom:var(--tk-spacing-sm, 16px);box-sizing:border-box}.color-palette__token-name{font-weight:700;font-size:14px!important;color:var(--tk-color-text-dark, #333);margin-bottom:5px;word-break:break-all;background:var(--tk-color-full-white);padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02)}.color-palette__token-value{font-size:.9em!important;color:var(--tk-color-text-light, #666);margin-bottom:var(--tk-spacing-sm, 16px);word-break:break-all}.color-palette__message{text-align:center;color:var(--tk-color-text-light, #666);padding:var(--tk-spacing-md, 24px)}.spacing-viewer{display:flex;gap:var(--tk-spacing-2);flex-wrap:wrap;padding:var(--tk-spacing-4)}.spacing-viewer__container{display:flex;flex-wrap:wrap;width:100%;padding:var(--tk-spacing-4);gap:var(--tk-spacing-2) var(--tk-spacing-8);flex-direction:row;border-radius:var(--rounded-scale-03);border:1px solid var(--tk-color-neutral-200, #cdcdcd)}.spacing-viewer__view-space{position:relative;color:var(--tk-color-secondary-700, #6941c6)}.spacing-viewer__view-space--color:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:var(--width);background-color:var(--tk-color-secondary-200, rgba(158, 119, 237, .1019607843));opacity:.5}.spacing-viewer__copy{display:flex;flex-direction:row;gap:var(--tk-spacing-4);align-items:center}.spacing-viewer__suffix{padding:var(--tk-spacing-1);border:1px solid var(--tk-color-neutral-200, #cdcdcd);border-radius:var(--tk-rounded-1, 4px);font-size:12px;cursor:pointer}:host{display:inline-flex;align-items:center;margin-left:var(--tk-spacing-02, 8px)}.copy-button{background:var(--tk-color-full-white, #fff);border:1px solid var(--tk-color-primary-500, #6ad0bc);border-radius:var(--tk-rounded-scale-04, 16px);padding:2px var(--tk-spacing-3, 12px);cursor:pointer;display:inline-flex;align-items:center;font-size:12px;color:var(--tk-color-secondary-900, #16006f);font-weight:500;box-shadow:none;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}.copy-button:hover:not([disabled]){background:var(--tk-color-primary-500, #6ad0bc);color:#fff;border-color:var(--tk-color-primary-500, #6ad0bc)}.copy-button:active{background:#e6f5ee;color:var(--tk-color-secondary-900, #16006f)}.copy-success-message{color:var(--tk-color-primary-500, #6ad0bc);font-weight:500;background:var(--tk-color-full-white, #fff);border-radius:var(--tk-rounded-scale-03, 8px);font-size:12px;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.illustration-doc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:var(--tk-spacing-5) 0;gap:var(--tk-spacing-4)}.illustration-doc__illustration-container{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-3);display:inline-flex;flex-direction:column;gap:var(--tk-spacing-2);justify-content:space-between}.illustration-doc__illustration{width:150px;height:150px}.illustration-doc__illustration svg{object-fit:contain;height:100%;width:100%}.illustration-doc__illustration-name{color:var(--tk-text-default-800);background-color:var(--tk-color-neutral-100);font-size:12px;border-radius:var(--tk-rounded-scale-03);padding:var(--tk-spacing-2)}.illustration-doc__copy-clipboard{text-align:center}.illustration-doc__no-found{color:var(--tk-text-default-700);text-align:center;display:flex;flex-direction:column;align-items:center}.illustration-doc input{margin-bottom:var(--tk-spacing-4);padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);width:100%;font-size:var(--tk-font-size-2, 16px)}.illustration-doc .illustration-doc__illustration-tags{font-size:var(--tk-font-size-2, 10px);color:var(--tk-text-default-600)}.paginator-doc{display:flex;justify-content:flex-end;align-items:center;gap:var(--tk-spacing-2)}.paginator-doc__buttons-nav{padding:var(--tk-spacing-1) var(--tk-spacing-2);font-size:var(--tk-font-size-2, 12px);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft)}.paginator-doc__buttons-text{font-size:var(--tk-font-size-2, 12px)!important;color:var(--tk-text-default-700)}.branding-doc-wrapper{margin:var(--tk-spacing-7) 0!important;padding:var(--tk-spacing-8)!important;max-width:400px;width:fit-content;position:relative}.branding-doc-wrapper.mark-border{border:var(--tk-spacing-8) solid var(--tk-color-danger-100);padding:0!important;margin:var(--tk-spacing-7)!important}.branding-doc-wrapper.mark-border:after{content:\"40px\";position:absolute;left:-40px;top:calc(3px + 100%);height:40px;font-size:12px;border-bottom:2px solid #000;display:flex;align-items:center;padding-left:8px;bottom:0}.branding-doc-wrapper.mark-border:before{content:\"40px\";position:absolute;left:-45px;top:-40px;height:40px;font-size:12px;border-left:2px solid #000;display:flex;align-items:center;padding-left:8px}.dark{background-color:var(--tk-color-neutral-800);color:var(--tk-color-full-white)}.branding-doc-content{height:100px;max-height:100px;width:fit-content}.branding-doc-content svg,.branding-doc-content img{height:100%;max-height:100px;width:100%;object-fit:contain}.branding-doc-content.mark-border:after{content:\"100px\";position:absolute;top:0;right:-90px;display:flex;align-items:center;height:100px;border-left:2px solid;padding-left:8px;font-size:12px}.svg-icon{display:inline-block;width:fit-content}.svg-icon[color=primary]{color:var(--tk-color-primary-500)}.svg-icon[color=secondary]{color:var(--tk-color-secondary-500)}.svg-icon[color=danger]{color:var(--tk-color-danger-500)}.svg-icon[color=warning]{color:var(--tk-color-warning-700)}.svg-icon[color=info]{color:var(--tk-color-info-500)}.svg-icon[color=light]{color:var(--tk-color-full-white)}.svg-icon[disabled=true],.svg-icon[data-disabled=true]{color:var(--tk-color-neutral-500)!important}.svg-icon__cu[size=\"2xs\"],.svg-icon__cu[data-size=\"2xs\"]{font-size:.625em}.svg-icon__cu[size=xs],.svg-icon__cu[data-size=xs]{font-size:.75em}.svg-icon__cu[size=sm],.svg-icon__cu[data-size=sm]{font-size:.875em}.svg-icon__cu[size=lg],.svg-icon__cu[data-size=lg]{font-size:1.25em}.svg-icon__cu[size=xl],.svg-icon__cu[data-size=xl]{font-size:1.5em}.svg-icon__cu[size=\"2xl\"],.svg-icon__cu[data-size=\"2xl\"]{font-size:2em}.svg-icon__cu[size=\"1x\"],.svg-icon__cu[data-size=\"1x\"]{font-size:1em}.svg-icon__cu[size=\"2x\"],.svg-icon__cu[data-size=\"2x\"]{font-size:2em}.svg-icon__cu[size=\"3x\"],.svg-icon__cu[data-size=\"3x\"]{font-size:3em}.svg-icon__cu[size=\"4x\"],.svg-icon__cu[data-size=\"4x\"]{font-size:4em}.svg-icon__cu[size=\"5x\"],.svg-icon__cu[data-size=\"5x\"]{font-size:5em}svg{width:100%;height:100%}.icons-doc{font-family:Poppins,sans-serif}.icons-doc__icon-search{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-2, 8px)}.icons-doc input,.icons-doc select{padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);font-size:var(--tk-font-size-2, 16px);flex:1 1 60%}.icons-doc select{flex:1 1 20%}.icons-doc__container{padding:20px 0}.icons-doc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:var(--tk-spacing-5) 0;gap:var(--tk-spacing-4)}.icons-doc__icon-card{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-3);display:inline-flex;flex-direction:column;gap:var(--tk-spacing-2);justify-content:space-between}.icons-doc__icon-name{color:var(--tk-text-default-800);background-color:var(--tk-color-neutral-100);font-size:12px;border-radius:var(--tk-rounded-scale-03);padding:var(--tk-spacing-2)}.icons-doc__icon-tags{font-size:var(--tk-font-size-2, 10px)!important;color:var(--tk-text-default-600)}.icon-doc-block,.copy-to-clipboard{display:flex;justify-content:center}.icon-colors{display:flex;gap:var(--tk-spacing-2, 8px);flex-direction:row;width:fit-content;padding:var(--tk-spacing-2, 8px);border-radius:var(--tk-rounded-scale-02);align-items:center}.icon-colors--bg-black{background-color:var(--tk-color-neutral-700)}.icon-colors--bg-white{background-color:var(--tk-color-full-white)}.icon-size-block{display:flex;gap:var(--tk-spacing-4, 16px)}.icon-size-block__content{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-5, 20px)}.icon-size{display:flex;gap:var(--tk-spacing-2, 8px);flex-direction:row;width:fit-content;padding:var(--tk-spacing-2, 8px);border-radius:var(--tk-rounded-scale-02);align-items:center}.table-of-content__container{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-4, 16px);min-width:0}.table-of-content__content{flex:1 1 0%;min-width:0;overflow-wrap:anywhere}.table-of-content__toc{position:sticky;top:0;padding:var(--tk-spacing-3, 12px);max-height:100vh;overflow:auto}.grid-container-doc{background-color:var(--tk-color-neutral-100);border-radius:var(--tk-rounded-scale-02);width:100%;min-width:fit-content}.grid-item-doc{border-radius:var(--tk-rounded-scale-01);background-color:var(--tk-color-full-white);padding:var(--tk-spacing-1);min-height:32px}.general{font-family:Poppins,sans-serif;padding:0;margin:0}.h1-heading{font-size:var(--tk-typography-h1-heading-fontSize);font-weight:var(--tk-typography-h1-heading-fontWeight)}.h2-heading{font-size:var(--tk-typography-h2-heading-fontSize);font-weight:var(--tk-typography-h2-heading-fontWeight)}.h3-heading{font-size:var(--tk-typography-h3-heading-fontSize);font-weight:var(--tk-typography-h3-heading-fontWeight)}.h4-heading{font-size:var(--tk-typography-h4-heading-fontSize);font-weight:var(--tk-typography-h4-heading-fontWeight)}.h5-heading{font-size:var(--tk-typography-h5-heading-fontSize);font-weight:var(--tk-typography-h5-heading-fontWeight)}.h6-heading{font-size:var(--tk-typography-h6-heading-fontSize);font-weight:var(--tk-typography-h6-heading-fontWeight)}.subtitle1{font-size:var(--tk-typography-subtitle1-fontSize);font-weight:var(--tk-typography-subtitle1-fontWeight)}.subtitle2{font-size:var(--tk-typography-subtitle2-fontSize);font-weight:var(--tk-typography-subtitle2-fontWeight)}.body1{font-size:var(--tk-typography-body1-fontSize);font-weight:var(--tk-typography-body1-fontWeight)}.body2{font-size:var(--tk-typography-body2-fontSize);font-weight:var(--tk-typography-body2-fontWeight)}.p1-paragraph{font-size:var(--tk-typography-p1-paragraph-fontSize);font-weight:var(--tk-typography-p1-paragraph-fontWeight)}.underline-text{font-size:var(--tk-typography-underline-fontSize);font-weight:var(--tk-typography-underline-fontWeight);text-decoration:\"underline\"}.color-tk-color-primary-900{color:var(--tk-color-primary-900)}.color-tk-color-primary-800{color:var(--tk-color-primary-800)}.color-tk-color-primary-700{color:var(--tk-color-primary-700)}.color-tk-color-primary-600{color:var(--tk-color-primary-600)}.color-tk-color-primary-500{color:var(--tk-color-primary-500)}.color-tk-color-primary-400{color:var(--tk-color-primary-400)}.color-tk-color-primary-300{color:var(--tk-color-primary-300)}.color-tk-color-primary-200{color:var(--tk-color-primary-200)}.color-tk-color-primary-100{color:var(--tk-color-primary-100)}.color-tk-color-primary{color:var(--tk-color-primary-900)}.color-tk-color-secondary-900{color:var(--tk-color-secondary-900)}.color-tk-color-secondary-800{color:var(--tk-color-secondary-800)}.color-tk-color-secondary-700{color:var(--tk-color-secondary-700)}.color-tk-color-secondary-600{color:var(--tk-color-secondary-600)}.color-tk-color-secondary-500{color:var(--tk-color-secondary-500)}.color-tk-color-secondary-400{color:var(--tk-color-secondary-400)}.color-tk-color-secondary-300{color:var(--tk-color-secondary-300)}.color-tk-color-secondary-200{color:var(--tk-color-secondary-200)}.color-tk-color-secondary-100{color:var(--tk-color-secondary-100)}.color-tk-color-secondary{color:var(--tk-color-secondary-900)}.color-tk-color-accent-900{color:var(--tk-color-accent-900)}.color-tk-color-accent-800{color:var(--tk-color-accent-800)}.color-tk-color-accent-700{color:var(--tk-color-accent-700)}.color-tk-color-accent-600{color:var(--tk-color-accent-600)}.color-tk-color-accent-500{color:var(--tk-color-accent-500)}.color-tk-color-accent-400{color:var(--tk-color-accent-400)}.color-tk-color-accent-300{color:var(--tk-color-accent-300)}.color-tk-color-accent-200{color:var(--tk-color-accent-200)}.color-tk-color-accent-100{color:var(--tk-color-accent-100)}.color-tk-color-accent{color:var(--tk-color-accent-500)}.color-tk-color-neutral-900{color:var(--tk-color-neutral-900)}.color-tk-color-neutral-800{color:var(--tk-color-neutral-800)}.color-tk-color-neutral-700{color:var(--tk-color-neutral-700)}.color-tk-color-neutral-600{color:var(--tk-color-neutral-600)}.color-tk-color-neutral-500{color:var(--tk-color-neutral-500)}.color-tk-color-neutral-400{color:var(--tk-color-neutral-400)}.color-tk-color-neutral-300{color:var(--tk-color-neutral-300)}.color-tk-color-neutral-200{color:var(--tk-color-neutral-200)}.color-tk-color-neutral-100{color:var(--tk-color-neutral-100)}.color-tk-color-neutral{color:var(--tk-color-neutral-500)}.color-tk-color-success-900{color:var(--tk-color-success-900)}.color-tk-color-success-800{color:var(--tk-color-success-800)}.color-tk-color-success-700{color:var(--tk-color-success-700)}.color-tk-color-success-600{color:var(--tk-color-success-600)}.color-tk-color-success-500{color:var(--tk-color-success-500)}.color-tk-color-success-400{color:var(--tk-color-success-400)}.color-tk-color-success-300{color:var(--tk-color-success-300)}.color-tk-color-success-200{color:var(--tk-color-success-200)}.color-tk-color-success-100{color:var(--tk-color-success-100)}.color-tk-color-success{color:var(--tk-color-success-500)}.color-tk-color-danger-900{color:var(--tk-color-danger-900)}.color-tk-color-danger-800{color:var(--tk-color-danger-800)}.color-tk-color-danger-700{color:var(--tk-color-danger-700)}.color-tk-color-danger-600{color:var(--tk-color-danger-600)}.color-tk-color-danger-500{color:var(--tk-color-danger-500)}.color-tk-color-danger-400{color:var(--tk-color-danger-400)}.color-tk-color-danger-300{color:var(--tk-color-danger-300)}.color-tk-color-danger-200{color:var(--tk-color-danger-200)}.color-tk-color-danger-100{color:var(--tk-color-danger-100)}.color-tk-color-danger{color:var(--tk-color-danger-500)}.color-tk-color-info-900{color:var(--tk-color-info-900)}.color-tk-color-info-800{color:var(--tk-color-info-800)}.color-tk-color-info-700{color:var(--tk-color-info-700)}.color-tk-color-info-600{color:var(--tk-color-info-600)}.color-tk-color-info-500{color:var(--tk-color-info-500)}.color-tk-color-info-400{color:var(--tk-color-info-400)}.color-tk-color-info-300{color:var(--tk-color-info-300)}.color-tk-color-info-200{color:var(--tk-color-info-200)}.color-tk-color-info-100{color:var(--tk-color-info-100)}.color-tk-color-info{color:var(--tk-color-info-500)}.color-tk-color-warning-900{color:var(--tk-color-warning-900)}.color-tk-color-warning-800{color:var(--tk-color-warning-800)}.color-tk-color-warning-700{color:var(--tk-color-warning-700)}.color-tk-color-warning-600{color:var(--tk-color-warning-600)}.color-tk-color-warning-500{color:var(--tk-color-warning-500)}.color-tk-color-warning-400{color:var(--tk-color-warning-400)}.color-tk-color-warning-300{color:var(--tk-color-warning-300)}.color-tk-color-warning-200{color:var(--tk-color-warning-200)}.color-tk-color-warning-100{color:var(--tk-color-warning-100)}.color-tk-color-warning{color:var(--tk-color-warning-500)}.color-tk-color-white,.color-tk-color-white-900{color:var(--tk-color-white-900)}.color-tk-color-white-800{color:var(--tk-color-white-800)}.color-tk-color-black,.color-tk-color-black-900{color:var(--tk-color-black-900)}.color-tk-color-text-900{color:var(--tk-color-text-900)}.color-tk-color-text-800{color:var(--tk-color-text-800)}.color-tk-color-text-700{color:var(--tk-color-text-700)}.color-tk-color-text-600{color:var(--tk-color-text-600)}.color-tk-color-text-500,.color-tk-color-text{color:var(--tk-color-text-500)}.color-tk-color-text-primary-900{color:var(--tk-color-text-primary-900)}.color-tk-color-text-primary-800{color:var(--tk-color-text-primary-800)}.color-tk-color-text-primary-700{color:var(--tk-color-text-primary-700)}.color-tk-color-text-primary-500{color:var(--tk-color-text-primary-500)}.color-tk-color-text-primary-400{color:var(--tk-color-text-primary-400)}.color-tk-color-text-primary-300{color:var(--tk-color-text-primary-300)}.color-tk-color-text-primary-200{color:var(--tk-color-text-primary-200)}.color-tk-color-text-primary-100{color:var(--tk-color-text-primary-100)}.color-tk-color-text-primary{color:var(--tk-color-text-primary-500)}.color-tk-color-text-secondary-900{color:var(--tk-color-text-secondary-900)}.color-tk-color-text-secondary-800{color:var(--tk-color-text-secondary-800)}.color-tk-color-text-secondary-700{color:var(--tk-color-text-secondary-700)}.color-tk-color-text-secondary-500{color:var(--tk-color-text-secondary-500)}.color-tk-color-text-secondary-400{color:var(--tk-color-text-secondary-400)}.color-tk-color-text-secondary-300{color:var(--tk-color-text-secondary-300)}.color-tk-color-text-secondary-200{color:var(--tk-color-text-secondary-200)}.color-tk-color-text-secondary-100{color:var(--tk-color-text-secondary-100)}.color-tk-color-text-secondary{color:var(--tk-color-text-secondary-500)}.color-tk-color-text-accent-900{color:var(--tk-color-text-accent-900)}.color-tk-color-text-accent-800{color:var(--tk-color-text-accent-800)}.color-tk-color-text-accent-700{color:var(--tk-color-text-accent-700)}.color-tk-color-text-accent-500{color:var(--tk-color-text-accent-500)}.color-tk-color-text-accent-400{color:var(--tk-color-text-accent-400)}.color-tk-color-text-accent-300{color:var(--tk-color-text-accent-300)}.color-tk-color-text-accent-200{color:var(--tk-color-text-accent-200)}.color-tk-color-text-accent-100{color:var(--tk-color-text-accent-100)}.color-tk-color-text-accent{color:var(--tk-color-text-accent-500)}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
15
15
|
}
|
|
16
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TypographyComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
|
-
args: [{ selector: 'tk-typography', standalone: true, imports: [NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet], template: "<ng-container [ngSwitch]=\"type\">\n <h1\n *ngSwitchCase=\"'h1-heading'\"\n class=\"general h1-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h1>\n <h2\n *ngSwitchCase=\"'h2-heading'\"\n class=\"general h2-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h2>\n <h3\n *ngSwitchCase=\"'h3-heading'\"\n class=\"general h3-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h4\n *ngSwitchCase=\"'h4-heading'\"\n class=\"general h4-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h4>\n <h5\n *ngSwitchCase=\"'h5-heading'\"\n class=\"general h5-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h5>\n <h6\n *ngSwitchCase=\"'h6-heading'\"\n class=\"general h6-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h6>\n <h3\n *ngSwitchCase=\"'subtitle1'\"\n class=\"general subtitle1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h3\n *ngSwitchCase=\"'subtitle2'\"\n class=\"general subtitle2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <p\n *ngSwitchCase=\"'body1'\"\n class=\"general body1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'body2'\"\n class=\"general body2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'p1-paragraph'\"\n class=\"general p1-paragraph\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'underline-text'\"\n class=\"general underline-text\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchDefault\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n</ng-container>\n\n<ng-template #text>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["html{--tk-font-weight-light: 200;--tk-font-weight-book: 300;--tk-font-weight-regular: 400;--tk-font-weight-medium: 500;--tk-font-weight-semi-bold: 600;--tk-font-weight-bold: 700;--tk-font-weight-extra-bold: 800}html{--tk-font-size-xl: 32px;--tk-font-size-lg: 28px;--tk-font-size-md: 24px;--tk-font-size-sm: 20px;--tk-font-size-xs: 18px;--tk-font-size-2xs: 16px;--tk-font-size-3xs: 14px;--tk-font-size-4xs: 12px;--tk-font-size-5xs: 10px}html{--tk-line-height-xl: 48px;--tk-line-height-lg: 42px;--tk-line-height-md: 36px;--tk-line-height-sm: 30px;--tk-line-height-xs: 27px;--tk-line-height-2xs: 24px;--tk-line-height-3xs: 21px;--tk-line-height-4xs: 18px;--tk-line-height-5xs: 15px}html{--tk-letter-spacing-tight: -1px;--tk-letter-spacing-normal: 0px;--tk-letter-spacing-relaxed: 1px;--tk-letter-spacing-wide: 2px;--tk-letter-spacing-extra-wide: 3px}h1{font-family:poppins,sans-serif;font-size:var(--tk-font-size-xl, 32px);line-height:var(--tk-line-height-xl, 48px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h2{font-family:poppins,sans-serif;font-size:var(--tk-font-size-lg, 28px);line-height:var(--tk-line-height-lg, 42px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h3{font-family:poppins,sans-serif;font-size:var(--tk-font-size-md, 24px);line-height:var(--tk-line-height-md, 36px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h4{font-family:poppins,sans-serif;font-size:var(--tk-font-size-sm, 20px);line-height:var(--tk-line-height-sm, 30px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h5{font-family:poppins,sans-serif;font-size:var(--tk-font-size-xs, 18px);line-height:var(--tk-line-height-xs, 27px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h6{font-family:poppins,sans-serif;font-size:var(--tk-font-size-2xs, 16px);line-height:var(--tk-line-height-2xs, 24px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}p[body-1]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-xs, 18px);line-height:var(--tk-line-height-xs, 27px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}p[body-2]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-2xs, 16px);line-height:var(--tk-line-height-2xs, 24px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}p[body-3],a[link-1]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-3xs, 14px);line-height:var(--tk-line-height-3xs, 21px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}a[link-2]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-4xs, 12px);line-height:var(--tk-line-height-4xs, 18px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}p[legal]{font-family:poppins,sans-serif;font-size:var(--tk-font-size-5xs, 10px);line-height:var(--tk-line-height-5xs, 15px);letter-spacing:var(--tk-letter-spacing-tight, -1px);font-weight:var(--tk-font-weight-book, 300)}h1[weight=light],h2[weight=light],h3[weight=light],h4[weight=light],h5[weight=light],h6[weight=light],p[body-1][weight=light],p[body-2][weight=light],p[body-3][weight=light],a[link-1][weight=light],a[link-2][weight=light],p[legal][weight=light]{font-weight:var(--tk-font-weight-light)}h1[weight=regular],h2[weight=regular],h3[weight=regular],h4[weight=regular],h5[weight=regular],h6[weight=regular],p[body-1][weight=regular],p[body-2][weight=regular],p[body-3][weight=regular],a[link-1][weight=regular],a[link-2][weight=regular],p[legal][weight=regular]{font-weight:var(--tk-font-weight-regular)}h1[weight=medium],h2[weight=medium],h3[weight=medium],h4[weight=medium],h5[weight=medium],h6[weight=medium],p[body-1][weight=medium],p[body-2][weight=medium],p[body-3][weight=medium],a[link-1][weight=medium],a[link-2][weight=medium],p[legal][weight=medium]{font-weight:var(--tk-font-weight-medium)}h1[weight=semi-bold],h2[weight=semi-bold],h3[weight=semi-bold],h4[weight=semi-bold],h5[weight=semi-bold],h6[weight=semi-bold],p[body-1][weight=semi-bold],p[body-2][weight=semi-bold],p[body-3][weight=semi-bold],a[link-1][weight=semi-bold],a[link-2][weight=semi-bold],p[legal][weight=semi-bold]{font-weight:var(--tk-font-weight-semi-bold)}h1[weight=bold],h2[weight=bold],h3[weight=bold],h4[weight=bold],h5[weight=bold],h6[weight=bold],p[body-1][weight=bold],p[body-2][weight=bold],p[body-3][weight=bold],a[link-1][weight=bold],a[link-2][weight=bold],p[legal][weight=bold]{font-weight:var(--tk-font-weight-bold)}h1[weight=extra-bold],h2[weight=extra-bold],h3[weight=extra-bold],h4[weight=extra-bold],h5[weight=extra-bold],h6[weight=extra-bold],p[body-1][weight=extra-bold],p[body-2][weight=extra-bold],p[body-3][weight=extra-bold],a[link-1][weight=extra-bold],a[link-2][weight=extra-bold],p[legal][weight=extra-bold]{font-weight:var(--tk-font-weight-extra-bold)}a[link-1][underline],a[link-2][underline]{text-decoration:underline}h1[color=primary]{color:var(--tk-color-primary-500, #6ad0bc)}h2[color=secondary]{color:var(--tk-color-secondary-700, #44338b)}html{--tk-color-primary-900: #375f57;--tk-color-primary-800: #467c71;--tk-color-primary-700: #4f9385;--tk-color-primary-600: #5bb09f;--tk-color-primary-500: #6ad0bc;--tk-color-primary-400: #87d9c9;--tk-color-primary-300: #a5e2d6;--tk-color-primary-200: #c3ece4;--tk-color-primary-100: #e1f5f1;--tk-color-secondary-900: #16006f;--tk-color-secondary-800: #2b177b;--tk-color-secondary-700: #44338b;--tk-color-secondary-600: #54429d;--tk-color-secondary-500: #7366a8;--tk-color-secondary-400: #8275bb;--tk-color-secondary-300: #a29ac5;--tk-color-secondary-200: #d1cde2;--tk-color-secondary-100: #efeef5;--tk-color-accent-900: #420008;--tk-color-accent-800: #6a000c;--tk-color-accent-700: #8e0d1c;--tk-color-accent-600: #b22535;--tk-color-accent-500: #ce4556;--tk-color-accent-400: #ee707e;--tk-color-accent-300: #f89a9c;--tk-color-accent-200: #fcc2c9;--tk-color-accent-100: #fee6e9;--tk-color-neutral-900: #040303;--tk-color-neutral-800: #333333;--tk-color-neutral-700: #444444;--tk-color-neutral-600: #5b5b5b;--tk-color-neutral-500: #6b6b6b;--tk-color-neutral-400: #9b9b9b;--tk-color-neutral-300: #b3b3b3;--tk-color-neutral-200: #cdcdcd;--tk-color-neutral-100: #f2f2f2;--tk-color-success-900: #004d34;--tk-color-success-800: #0c623e;--tk-color-success-700: #00875b;--tk-color-success-600: #18ae7d;--tk-color-success-500: #36b37e;--tk-color-success-400: #57d9a3;--tk-color-success-300: #79f2c0;--tk-color-success-200: #abf5d1;--tk-color-success-100: #e3fcef;--tk-color-danger-900: #950700;--tk-color-danger-800: #af0c1d;--tk-color-danger-700: #cf2604;--tk-color-danger-600: #f43e11;--tk-color-danger-500: #ff6640;--tk-color-danger-400: #ff7f63;--tk-color-danger-300: #ffa28b;--tk-color-danger-200: #fbc2b4;--tk-color-danger-100: #ffddd4;--tk-color-info-900: #01367b;--tk-color-info-800: #01469e;--tk-color-info-700: #0a68e0;--tk-color-info-600: #1c89ff;--tk-color-info-500: #3998ff;--tk-color-info-400: #509dff;--tk-color-info-300: #7bb4fe;--tk-color-info-200: #b3d4ff;--tk-color-info-100: #deebff;--tk-color-warning-900: #ffc55d;--tk-color-warning-800: #ffca6b;--tk-color-warning-700: #ffd07d;--tk-color-warning-600: #ffd68f;--tk-color-warning-500: #ffdc9d;--tk-color-warning-400: #f5dbac;--tk-color-warning-300: #ffe8be;--tk-color-warning-200: #fff3df;--tk-color-warning-100: #fffaf2;--tk-text-default-900: #101820;--tk-text-default-800: #6c6c6c;--tk-text-default-700: #656d76;--tk-text-default-600: #a0a9b4;--tk-text-default-500: #d0d5dd;--tk-border-soft: #eaecf0;--tk-border-error: #de350b;--tk-border-hover: #667085;--tk-border-focused: #6ad0bc;--tk-border-disabled: #d0d5dd;--tk-color-full-black: #101820;--tk-color-full-white: #ffffff}html{--tk-spacing-1: 4px;--tk-spacing-2: 8px;--tk-spacing-3: 12px;--tk-spacing-4: 16px;--tk-spacing-5: 20px;--tk-spacing-6: 24px;--tk-spacing-7: 32px;--tk-spacing-8: 40px;--tk-spacing-9: 48px;--tk-spacing-10: 64px;--tk-spacing-11: 80px;--tk-spacing-12: 96px;--tk-spacing-13: 128px;--tk-spacing-14: 160px;--tk-spacing-15: 192px;--tk-spacing-16: 224px;--tk-spacing-17: 256px}html{--tk-rounded-null: 0;--tk-rounded-scale-01: 2px;--tk-rounded-scale-02: 4px;--tk-rounded-scale-03: 8px;--tk-rounded-scale-04: 12px;--tk-rounded-scale-05: 16px;--tk-rounded-scale-10: 100%}html{--tk-low-blur-small: 2px;--tk-low-blur-medium: 4px;--tk-low-blur-large: 10px;--tk-medium-blur-small: 4px;--tk-medium-blur-medium: 8px;--tk-medium-blur-large: 15px;--tk-high-blur-small: 8px;--tk-high-blur-medium: 12px;--tk-high-blur-large: 20px}html{--tk-shadow-small: 2px 2px 4px 0px #cdcdcd26;--tk-shadow-medium: 2px 4px 8px 0px #cdcdcd66;--tk-shadow-large: 0px 4px 8px 0px #cdcdcd99}.color-palette__container{color:var(--tk-color-text, #333);padding:var(--tk-spacing-md, 24px);border:1px solid var(--tk-color-border, #eee);border-radius:var(--tk-border-radius-md, 8px);margin-top:var(--tk-spacing-lg, 32px);box-shadow:var(--tk-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}.color-palette__title{color:var(--tk-color-heading, #222);margin-top:0;margin-bottom:var(--tk-spacing-sm, 16px)}.color-palette__description{font-size:.9em;color:var(--tk-color-text-light, #666);margin-bottom:var(--tk-spacing-md, 24px)}.color-palette__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--tk-spacing-md, 24px)}.color-palette__card{border:1px solid var(--tk-color-border, #e0e0e0);border-radius:var(--tk-border-radius-sm, 8px);padding:var(--tk-spacing-sm, 16px);background-color:var(--tk-color-neutral-100, #f9f9f9);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--tk-shadow-xs, 0 .5px 2px rgba(0, 0, 0, .05));gap:var(--tk-spacing-2);transition:transform .2s ease,box-shadow .2s ease}.color-palette__card:hover{transform:translateY(-2px);box-shadow:var(--tk-shadow-md, 0 2px 6px rgba(0, 0, 0, .15))}.color-palette__swatch{width:100%;height:36px;border-radius:var(--tk-border-radius-xs, 4px);border:1px solid rgba(0,0,0,.1);margin-bottom:var(--tk-spacing-sm, 16px);box-sizing:border-box}.color-palette__token-name{font-weight:700;font-size:14px!important;color:var(--tk-color-text-dark, #333);margin-bottom:5px;word-break:break-all;background:var(--tk-color-full-white);padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02)}.color-palette__token-value{font-size:.9em!important;color:var(--tk-color-text-light, #666);margin-bottom:var(--tk-spacing-sm, 16px);word-break:break-all}.color-palette__message{text-align:center;color:var(--tk-color-text-light, #666);padding:var(--tk-spacing-md, 24px)}.spacing-viewer{display:flex;gap:var(--tk-spacing-2);flex-wrap:wrap;padding:var(--tk-spacing-4)}.spacing-viewer__container{display:flex;flex-wrap:wrap;width:100%;padding:var(--tk-spacing-4);gap:var(--tk-spacing-2) var(--tk-spacing-8);flex-direction:row;border-radius:var(--rounded-scale-03);border:1px solid var(--tk-color-neutral-200, #cdcdcd)}.spacing-viewer__view-space{position:relative;color:var(--tk-color-secondary-700, #6941c6)}.spacing-viewer__view-space--color:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:var(--width);background-color:var(--tk-color-secondary-200, rgba(158, 119, 237, .1019607843));opacity:.5}.spacing-viewer__copy{display:flex;flex-direction:row;gap:var(--tk-spacing-4);align-items:center}.spacing-viewer__suffix{padding:var(--tk-spacing-1);border:1px solid var(--tk-color-neutral-200, #cdcdcd);border-radius:var(--tk-rounded-1, 4px);font-size:12px;cursor:pointer}:host{display:inline-flex;align-items:center;margin-left:var(--tk-spacing-02, 8px)}.copy-button{background:var(--tk-color-full-white, #fff);border:1px solid var(--tk-color-primary-500, #6ad0bc);border-radius:var(--tk-rounded-scale-04, 16px);padding:2px var(--tk-spacing-3, 12px);cursor:pointer;display:inline-flex;align-items:center;font-size:12px;color:var(--tk-color-secondary-900, #16006f);font-weight:500;box-shadow:none;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}.copy-button:hover:not([disabled]){background:var(--tk-color-primary-500, #6ad0bc);color:#fff;border-color:var(--tk-color-primary-500, #6ad0bc)}.copy-button:active{background:#e6f5ee;color:var(--tk-color-secondary-900, #16006f)}.copy-success-message{color:var(--tk-color-primary-500, #6ad0bc);font-weight:500;background:var(--tk-color-full-white, #fff);border-radius:var(--tk-rounded-scale-03, 8px);font-size:12px;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.illustration-doc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:var(--tk-spacing-5) 0;gap:var(--tk-spacing-4)}.illustration-doc__illustration-container{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-3);display:inline-flex;flex-direction:column;gap:var(--tk-spacing-2);justify-content:space-between}.illustration-doc__illustration{width:150px;height:150px}.illustration-doc__illustration svg{object-fit:contain;height:100%;width:100%}.illustration-doc__illustration-name{color:var(--tk-text-default-800);background-color:var(--tk-color-neutral-100);font-size:12px;border-radius:var(--tk-rounded-scale-03);padding:var(--tk-spacing-2)}.illustration-doc__copy-clipboard{text-align:center}.illustration-doc__no-found{color:var(--tk-text-default-700);text-align:center;display:flex;flex-direction:column;align-items:center}.illustration-doc input{margin-bottom:var(--tk-spacing-4);padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);width:100%;font-size:var(--tk-font-size-2, 16px)}.illustration-doc .illustration-doc__illustration-tags{font-size:var(--tk-font-size-2, 10px);color:var(--tk-text-default-600)}.paginator-doc{display:flex;justify-content:flex-end;align-items:center;gap:var(--tk-spacing-2)}.paginator-doc__buttons-nav{padding:var(--tk-spacing-1) var(--tk-spacing-2);font-size:var(--tk-font-size-2, 12px);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft)}.paginator-doc__buttons-text{font-size:var(--tk-font-size-2, 12px)!important;color:var(--tk-text-default-700)}.branding-doc-wrapper{margin:var(--tk-spacing-7) 0!important;padding:var(--tk-spacing-8)!important;max-width:400px;width:fit-content;position:relative}.branding-doc-wrapper.mark-border{border:var(--tk-spacing-8) solid var(--tk-color-danger-100);padding:0!important;margin:var(--tk-spacing-7)!important}.branding-doc-wrapper.mark-border:after{content:\"40px\";position:absolute;left:-40px;top:calc(3px + 100%);height:40px;font-size:12px;border-bottom:2px solid #000;display:flex;align-items:center;padding-left:8px;bottom:0}.branding-doc-wrapper.mark-border:before{content:\"40px\";position:absolute;left:-45px;top:-40px;height:40px;font-size:12px;border-left:2px solid #000;display:flex;align-items:center;padding-left:8px}.dark{background-color:var(--tk-color-neutral-800);color:var(--tk-color-full-white)}.branding-doc-content{height:100px;max-height:100px;width:fit-content}.branding-doc-content svg,.branding-doc-content img{height:100%;max-height:100px;width:100%;object-fit:contain}.branding-doc-content.mark-border:after{content:\"100px\";position:absolute;top:0;right:-90px;display:flex;align-items:center;height:100px;border-left:2px solid;padding-left:8px;font-size:12px}.svg-icon{display:inline-block;width:fit-content}.svg-icon[color=primary]{color:var(--tk-color-primary-500)}.svg-icon[color=secondary]{color:var(--tk-color-secondary-500)}.svg-icon[color=danger]{color:var(--tk-color-danger-500)}.svg-icon[color=warning]{color:var(--tk-color-warning-700)}.svg-icon[color=info]{color:var(--tk-color-info-500)}.svg-icon[color=light]{color:var(--tk-color-full-white)}.svg-icon[disabled=true],.svg-icon[data-disabled=true]{color:var(--tk-color-neutral-500)!important}.svg-icon__cu[size=\"2xs\"],.svg-icon__cu[data-size=\"2xs\"]{font-size:.625em}.svg-icon__cu[size=xs],.svg-icon__cu[data-size=xs]{font-size:.75em}.svg-icon__cu[size=sm],.svg-icon__cu[data-size=sm]{font-size:.875em}.svg-icon__cu[size=lg],.svg-icon__cu[data-size=lg]{font-size:1.25em}.svg-icon__cu[size=xl],.svg-icon__cu[data-size=xl]{font-size:1.5em}.svg-icon__cu[size=\"2xl\"],.svg-icon__cu[data-size=\"2xl\"]{font-size:2em}.svg-icon__cu[size=\"1x\"],.svg-icon__cu[data-size=\"1x\"]{font-size:1em}.svg-icon__cu[size=\"2x\"],.svg-icon__cu[data-size=\"2x\"]{font-size:2em}.svg-icon__cu[size=\"3x\"],.svg-icon__cu[data-size=\"3x\"]{font-size:3em}.svg-icon__cu[size=\"4x\"],.svg-icon__cu[data-size=\"4x\"]{font-size:4em}.svg-icon__cu[size=\"5x\"],.svg-icon__cu[data-size=\"5x\"]{font-size:5em}svg{width:100%;height:100%}.icons-doc{font-family:Poppins,sans-serif}.icons-doc__icon-search{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-2, 8px)}.icons-doc input,.icons-doc select{padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);font-size:var(--tk-font-size-2, 16px);flex:1 1 60%}.icons-doc select{flex:1 1 20%}.icons-doc__container{padding:20px 0}.icons-doc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:var(--tk-spacing-5) 0;gap:var(--tk-spacing-4)}.icons-doc__icon-card{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-3);display:inline-flex;flex-direction:column;gap:var(--tk-spacing-2);justify-content:space-between}.icons-doc__icon-name{color:var(--tk-text-default-800);background-color:var(--tk-color-neutral-100);font-size:12px;border-radius:var(--tk-rounded-scale-03);padding:var(--tk-spacing-2)}.icons-doc__icon-tags{font-size:var(--tk-font-size-2, 10px)!important;color:var(--tk-text-default-600)}.icon-doc-block,.copy-to-clipboard{display:flex;justify-content:center}.icon-colors{display:flex;gap:var(--tk-spacing-2, 8px);flex-direction:row;width:fit-content;padding:var(--tk-spacing-2, 8px);border-radius:var(--tk-rounded-scale-02);align-items:center}.icon-colors--bg-black{background-color:var(--tk-color-neutral-700)}.icon-colors--bg-white{background-color:var(--tk-color-full-white)}.icon-size-block{display:flex;gap:var(--tk-spacing-4, 16px)}.icon-size-block__content{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-5, 20px)}.icon-size{display:flex;gap:var(--tk-spacing-2, 8px);flex-direction:row;width:fit-content;padding:var(--tk-spacing-2, 8px);border-radius:var(--tk-rounded-scale-02);align-items:center}.table-of-content__container{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-4, 16px);min-width:0}.table-of-content__content{flex:1 1 0%;min-width:0;overflow-wrap:anywhere}.table-of-content__toc{position:sticky;top:0;padding:var(--tk-spacing-3, 12px);max-height:100vh;overflow:auto}.grid-container-doc{background-color:var(--tk-color-neutral-100);border-radius:var(--tk-rounded-scale-02);width:100%;min-width:fit-content}.grid-item-doc{border-radius:var(--tk-rounded-scale-01);background-color:var(--tk-color-full-white);padding:var(--tk-spacing-1);min-height:32px}.general{font-family:Poppins,sans-serif;padding:0;margin:0}.h1-heading{font-size:var(--tk-typography-h1-heading-fontSize);font-weight:var(--tk-typography-h1-heading-fontWeight)}.h2-heading{font-size:var(--tk-typography-h2-heading-fontSize);font-weight:var(--tk-typography-h2-heading-fontWeight)}.h3-heading{font-size:var(--tk-typography-h3-heading-fontSize);font-weight:var(--tk-typography-h3-heading-fontWeight)}.h4-heading{font-size:var(--tk-typography-h4-heading-fontSize);font-weight:var(--tk-typography-h4-heading-fontWeight)}.h5-heading{font-size:var(--tk-typography-h5-heading-fontSize);font-weight:var(--tk-typography-h5-heading-fontWeight)}.h6-heading{font-size:var(--tk-typography-h6-heading-fontSize);font-weight:var(--tk-typography-h6-heading-fontWeight)}.subtitle1{font-size:var(--tk-typography-subtitle1-fontSize);font-weight:var(--tk-typography-subtitle1-fontWeight)}.subtitle2{font-size:var(--tk-typography-subtitle2-fontSize);font-weight:var(--tk-typography-subtitle2-fontWeight)}.body1{font-size:var(--tk-typography-body1-fontSize);font-weight:var(--tk-typography-body1-fontWeight)}.body2{font-size:var(--tk-typography-body2-fontSize);font-weight:var(--tk-typography-body2-fontWeight)}.p1-paragraph{font-size:var(--tk-typography-p1-paragraph-fontSize);font-weight:var(--tk-typography-p1-paragraph-fontWeight)}.underline-text{font-size:var(--tk-typography-underline-fontSize);font-weight:var(--tk-typography-underline-fontWeight);text-decoration:\"underline\"}.color-tk-color-primary-900{color:var(--tk-color-primary-900)}.color-tk-color-primary-800{color:var(--tk-color-primary-800)}.color-tk-color-primary-700{color:var(--tk-color-primary-700)}.color-tk-color-primary-600{color:var(--tk-color-primary-600)}.color-tk-color-primary-500{color:var(--tk-color-primary-500)}.color-tk-color-primary-400{color:var(--tk-color-primary-400)}.color-tk-color-primary-300{color:var(--tk-color-primary-300)}.color-tk-color-primary-200{color:var(--tk-color-primary-200)}.color-tk-color-primary-100{color:var(--tk-color-primary-100)}.color-tk-color-primary{color:var(--tk-color-primary-900)}.color-tk-color-secondary-900{color:var(--tk-color-secondary-900)}.color-tk-color-secondary-800{color:var(--tk-color-secondary-800)}.color-tk-color-secondary-700{color:var(--tk-color-secondary-700)}.color-tk-color-secondary-600{color:var(--tk-color-secondary-600)}.color-tk-color-secondary-500{color:var(--tk-color-secondary-500)}.color-tk-color-secondary-400{color:var(--tk-color-secondary-400)}.color-tk-color-secondary-300{color:var(--tk-color-secondary-300)}.color-tk-color-secondary-200{color:var(--tk-color-secondary-200)}.color-tk-color-secondary-100{color:var(--tk-color-secondary-100)}.color-tk-color-secondary{color:var(--tk-color-secondary-900)}.color-tk-color-accent-900{color:var(--tk-color-accent-900)}.color-tk-color-accent-800{color:var(--tk-color-accent-800)}.color-tk-color-accent-700{color:var(--tk-color-accent-700)}.color-tk-color-accent-600{color:var(--tk-color-accent-600)}.color-tk-color-accent-500{color:var(--tk-color-accent-500)}.color-tk-color-accent-400{color:var(--tk-color-accent-400)}.color-tk-color-accent-300{color:var(--tk-color-accent-300)}.color-tk-color-accent-200{color:var(--tk-color-accent-200)}.color-tk-color-accent-100{color:var(--tk-color-accent-100)}.color-tk-color-accent{color:var(--tk-color-accent-500)}.color-tk-color-neutral-900{color:var(--tk-color-neutral-900)}.color-tk-color-neutral-800{color:var(--tk-color-neutral-800)}.color-tk-color-neutral-700{color:var(--tk-color-neutral-700)}.color-tk-color-neutral-600{color:var(--tk-color-neutral-600)}.color-tk-color-neutral-500{color:var(--tk-color-neutral-500)}.color-tk-color-neutral-400{color:var(--tk-color-neutral-400)}.color-tk-color-neutral-300{color:var(--tk-color-neutral-300)}.color-tk-color-neutral-200{color:var(--tk-color-neutral-200)}.color-tk-color-neutral-100{color:var(--tk-color-neutral-100)}.color-tk-color-neutral{color:var(--tk-color-neutral-500)}.color-tk-color-success-900{color:var(--tk-color-success-900)}.color-tk-color-success-800{color:var(--tk-color-success-800)}.color-tk-color-success-700{color:var(--tk-color-success-700)}.color-tk-color-success-600{color:var(--tk-color-success-600)}.color-tk-color-success-500{color:var(--tk-color-success-500)}.color-tk-color-success-400{color:var(--tk-color-success-400)}.color-tk-color-success-300{color:var(--tk-color-success-300)}.color-tk-color-success-200{color:var(--tk-color-success-200)}.color-tk-color-success-100{color:var(--tk-color-success-100)}.color-tk-color-success{color:var(--tk-color-success-500)}.color-tk-color-danger-900{color:var(--tk-color-danger-900)}.color-tk-color-danger-800{color:var(--tk-color-danger-800)}.color-tk-color-danger-700{color:var(--tk-color-danger-700)}.color-tk-color-danger-600{color:var(--tk-color-danger-600)}.color-tk-color-danger-500{color:var(--tk-color-danger-500)}.color-tk-color-danger-400{color:var(--tk-color-danger-400)}.color-tk-color-danger-300{color:var(--tk-color-danger-300)}.color-tk-color-danger-200{color:var(--tk-color-danger-200)}.color-tk-color-danger-100{color:var(--tk-color-danger-100)}.color-tk-color-danger{color:var(--tk-color-danger-500)}.color-tk-color-info-900{color:var(--tk-color-info-900)}.color-tk-color-info-800{color:var(--tk-color-info-800)}.color-tk-color-info-700{color:var(--tk-color-info-700)}.color-tk-color-info-600{color:var(--tk-color-info-600)}.color-tk-color-info-500{color:var(--tk-color-info-500)}.color-tk-color-info-400{color:var(--tk-color-info-400)}.color-tk-color-info-300{color:var(--tk-color-info-300)}.color-tk-color-info-200{color:var(--tk-color-info-200)}.color-tk-color-info-100{color:var(--tk-color-info-100)}.color-tk-color-info{color:var(--tk-color-info-500)}.color-tk-color-warning-900{color:var(--tk-color-warning-900)}.color-tk-color-warning-800{color:var(--tk-color-warning-800)}.color-tk-color-warning-700{color:var(--tk-color-warning-700)}.color-tk-color-warning-600{color:var(--tk-color-warning-600)}.color-tk-color-warning-500{color:var(--tk-color-warning-500)}.color-tk-color-warning-400{color:var(--tk-color-warning-400)}.color-tk-color-warning-300{color:var(--tk-color-warning-300)}.color-tk-color-warning-200{color:var(--tk-color-warning-200)}.color-tk-color-warning-100{color:var(--tk-color-warning-100)}.color-tk-color-warning{color:var(--tk-color-warning-500)}.color-tk-color-white,.color-tk-color-white-900{color:var(--tk-color-white-900)}.color-tk-color-white-800{color:var(--tk-color-white-800)}.color-tk-color-black,.color-tk-color-black-900{color:var(--tk-color-black-900)}.color-tk-color-text-900{color:var(--tk-color-text-900)}.color-tk-color-text-800{color:var(--tk-color-text-800)}.color-tk-color-text-700{color:var(--tk-color-text-700)}.color-tk-color-text-600{color:var(--tk-color-text-600)}.color-tk-color-text-500,.color-tk-color-text{color:var(--tk-color-text-500)}.color-tk-color-text-primary-900{color:var(--tk-color-text-primary-900)}.color-tk-color-text-primary-800{color:var(--tk-color-text-primary-800)}.color-tk-color-text-primary-700{color:var(--tk-color-text-primary-700)}.color-tk-color-text-primary-500{color:var(--tk-color-text-primary-500)}.color-tk-color-text-primary-400{color:var(--tk-color-text-primary-400)}.color-tk-color-text-primary-300{color:var(--tk-color-text-primary-300)}.color-tk-color-text-primary-200{color:var(--tk-color-text-primary-200)}.color-tk-color-text-primary-100{color:var(--tk-color-text-primary-100)}.color-tk-color-text-primary{color:var(--tk-color-text-primary-500)}.color-tk-color-text-secondary-900{color:var(--tk-color-text-secondary-900)}.color-tk-color-text-secondary-800{color:var(--tk-color-text-secondary-800)}.color-tk-color-text-secondary-700{color:var(--tk-color-text-secondary-700)}.color-tk-color-text-secondary-500{color:var(--tk-color-text-secondary-500)}.color-tk-color-text-secondary-400{color:var(--tk-color-text-secondary-400)}.color-tk-color-text-secondary-300{color:var(--tk-color-text-secondary-300)}.color-tk-color-text-secondary-200{color:var(--tk-color-text-secondary-200)}.color-tk-color-text-secondary-100{color:var(--tk-color-text-secondary-100)}.color-tk-color-text-secondary{color:var(--tk-color-text-secondary-500)}.color-tk-color-text-accent-900{color:var(--tk-color-text-accent-900)}.color-tk-color-text-accent-800{color:var(--tk-color-text-accent-800)}.color-tk-color-text-accent-700{color:var(--tk-color-text-accent-700)}.color-tk-color-text-accent-500{color:var(--tk-color-text-accent-500)}.color-tk-color-text-accent-400{color:var(--tk-color-text-accent-400)}.color-tk-color-text-accent-300{color:var(--tk-color-text-accent-300)}.color-tk-color-text-accent-200{color:var(--tk-color-text-accent-200)}.color-tk-color-text-accent-100{color:var(--tk-color-text-accent-100)}.color-tk-color-text-accent{color:var(--tk-color-text-accent-500)}\n"] }]
|
|
18
|
+
args: [{ selector: 'tk-typography', standalone: true, imports: [NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet], template: "<ng-container [ngSwitch]=\"type\">\n <h1\n *ngSwitchCase=\"'h1-heading'\"\n class=\"general h1-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h1>\n <h2\n *ngSwitchCase=\"'h2-heading'\"\n class=\"general h2-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h2>\n <h3\n *ngSwitchCase=\"'h3-heading'\"\n class=\"general h3-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h4\n *ngSwitchCase=\"'h4-heading'\"\n class=\"general h4-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h4>\n <h5\n *ngSwitchCase=\"'h5-heading'\"\n class=\"general h5-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h5>\n <h6\n *ngSwitchCase=\"'h6-heading'\"\n class=\"general h6-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h6>\n <h3\n *ngSwitchCase=\"'subtitle1'\"\n class=\"general subtitle1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h3\n *ngSwitchCase=\"'subtitle2'\"\n class=\"general subtitle2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <p\n *ngSwitchCase=\"'body1'\"\n class=\"general body1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'body2'\"\n class=\"general body2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'p1-paragraph'\"\n class=\"general p1-paragraph\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'underline-text'\"\n class=\"general underline-text\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchDefault\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n</ng-container>\n\n<ng-template #text>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["html{--tk-color-primary-900: #375f57;--tk-color-primary-800: #467c71;--tk-color-primary-700: #4f9385;--tk-color-primary-600: #5bb09f;--tk-color-primary-500: #6ad0bc;--tk-color-primary-400: #87d9c9;--tk-color-primary-300: #a5e2d6;--tk-color-primary-200: #c3ece4;--tk-color-primary-100: #e1f5f1;--tk-color-secondary-900: #16006f;--tk-color-secondary-800: #2b177b;--tk-color-secondary-700: #44338b;--tk-color-secondary-600: #54429d;--tk-color-secondary-500: #7366a8;--tk-color-secondary-400: #8275bb;--tk-color-secondary-300: #a29ac5;--tk-color-secondary-200: #d1cde2;--tk-color-secondary-100: #efeef5;--tk-color-accent-900: #420008;--tk-color-accent-800: #6a000c;--tk-color-accent-700: #8e0d1c;--tk-color-accent-600: #b22535;--tk-color-accent-500: #ce4556;--tk-color-accent-400: #ee707e;--tk-color-accent-300: #f89a9c;--tk-color-accent-200: #fcc2c9;--tk-color-accent-100: #fee6e9;--tk-color-neutral-900: #040303;--tk-color-neutral-800: #333333;--tk-color-neutral-700: #444444;--tk-color-neutral-600: #5b5b5b;--tk-color-neutral-500: #6b6b6b;--tk-color-neutral-400: #9b9b9b;--tk-color-neutral-300: #b3b3b3;--tk-color-neutral-200: #cdcdcd;--tk-color-neutral-100: #f2f2f2;--tk-color-success-900: #004d34;--tk-color-success-800: #0c623e;--tk-color-success-700: #00875b;--tk-color-success-600: #18ae7d;--tk-color-success-500: #36b37e;--tk-color-success-400: #57d9a3;--tk-color-success-300: #79f2c0;--tk-color-success-200: #abf5d1;--tk-color-success-100: #e3fcef;--tk-color-danger-900: #950700;--tk-color-danger-800: #af0c1d;--tk-color-danger-700: #cf2604;--tk-color-danger-600: #f43e11;--tk-color-danger-500: #ff6640;--tk-color-danger-400: #ff7f63;--tk-color-danger-300: #ffa28b;--tk-color-danger-200: #fbc2b4;--tk-color-danger-100: #ffddd4;--tk-color-info-900: #01367b;--tk-color-info-800: #01469e;--tk-color-info-700: #0a68e0;--tk-color-info-600: #1c89ff;--tk-color-info-500: #3998ff;--tk-color-info-400: #509dff;--tk-color-info-300: #7bb4fe;--tk-color-info-200: #b3d4ff;--tk-color-info-100: #deebff;--tk-color-warning-900: #ffc55d;--tk-color-warning-800: #ffca6b;--tk-color-warning-700: #ffd07d;--tk-color-warning-600: #ffd68f;--tk-color-warning-500: #ffdc9d;--tk-color-warning-400: #f5dbac;--tk-color-warning-300: #ffe8be;--tk-color-warning-200: #fff3df;--tk-color-warning-100: #fffaf2;--tk-text-default-900: #101820;--tk-text-default-800: #6c6c6c;--tk-text-default-700: #656d76;--tk-text-default-600: #a0a9b4;--tk-text-default-500: #d0d5dd;--tk-border-soft: #eaecf0;--tk-border-error: #de350b;--tk-border-hover: #667085;--tk-border-focused: #6ad0bc;--tk-border-disabled: #d0d5dd;--tk-color-full-black: #101820;--tk-color-full-white: #ffffff}html{--tk-spacing-1: 4px;--tk-spacing-2: 8px;--tk-spacing-3: 12px;--tk-spacing-4: 16px;--tk-spacing-5: 20px;--tk-spacing-6: 24px;--tk-spacing-7: 32px;--tk-spacing-8: 40px;--tk-spacing-9: 48px;--tk-spacing-10: 64px;--tk-spacing-11: 80px;--tk-spacing-12: 96px;--tk-spacing-13: 128px;--tk-spacing-14: 160px;--tk-spacing-15: 192px;--tk-spacing-16: 224px;--tk-spacing-17: 256px}html{--tk-rounded-null: 0;--tk-rounded-scale-01: 2px;--tk-rounded-scale-02: 4px;--tk-rounded-scale-03: 8px;--tk-rounded-scale-04: 12px;--tk-rounded-scale-05: 16px;--tk-rounded-scale-10: 100%}html{--tk-low-blur-small: 2px;--tk-low-blur-medium: 4px;--tk-low-blur-large: 10px;--tk-medium-blur-small: 4px;--tk-medium-blur-medium: 8px;--tk-medium-blur-large: 15px;--tk-high-blur-small: 8px;--tk-high-blur-medium: 12px;--tk-high-blur-large: 20px}html{--tk-shadow-small: 2px 2px 4px 0px #cdcdcd26;--tk-shadow-medium: 2px 4px 8px 0px #cdcdcd66;--tk-shadow-large: 0px 4px 8px 0px #cdcdcd99}.color-palette__container{color:var(--tk-color-text, #333);padding:var(--tk-spacing-md, 24px);border:1px solid var(--tk-color-border, #eee);border-radius:var(--tk-border-radius-md, 8px);margin-top:var(--tk-spacing-lg, 32px);box-shadow:var(--tk-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}.color-palette__title{color:var(--tk-color-heading, #222);margin-top:0;margin-bottom:var(--tk-spacing-sm, 16px)}.color-palette__description{font-size:.9em;color:var(--tk-color-text-light, #666);margin-bottom:var(--tk-spacing-md, 24px)}.color-palette__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--tk-spacing-md, 24px)}.color-palette__card{border:1px solid var(--tk-color-border, #e0e0e0);border-radius:var(--tk-border-radius-sm, 8px);padding:var(--tk-spacing-sm, 16px);background-color:var(--tk-color-neutral-100, #f9f9f9);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--tk-shadow-xs, 0 .5px 2px rgba(0, 0, 0, .05));gap:var(--tk-spacing-2);transition:transform .2s ease,box-shadow .2s ease}.color-palette__card:hover{transform:translateY(-2px);box-shadow:var(--tk-shadow-md, 0 2px 6px rgba(0, 0, 0, .15))}.color-palette__swatch{width:100%;height:36px;border-radius:var(--tk-border-radius-xs, 4px);border:1px solid rgba(0,0,0,.1);margin-bottom:var(--tk-spacing-sm, 16px);box-sizing:border-box}.color-palette__token-name{font-weight:700;font-size:14px!important;color:var(--tk-color-text-dark, #333);margin-bottom:5px;word-break:break-all;background:var(--tk-color-full-white);padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02)}.color-palette__token-value{font-size:.9em!important;color:var(--tk-color-text-light, #666);margin-bottom:var(--tk-spacing-sm, 16px);word-break:break-all}.color-palette__message{text-align:center;color:var(--tk-color-text-light, #666);padding:var(--tk-spacing-md, 24px)}.spacing-viewer{display:flex;gap:var(--tk-spacing-2);flex-wrap:wrap;padding:var(--tk-spacing-4)}.spacing-viewer__container{display:flex;flex-wrap:wrap;width:100%;padding:var(--tk-spacing-4);gap:var(--tk-spacing-2) var(--tk-spacing-8);flex-direction:row;border-radius:var(--rounded-scale-03);border:1px solid var(--tk-color-neutral-200, #cdcdcd)}.spacing-viewer__view-space{position:relative;color:var(--tk-color-secondary-700, #6941c6)}.spacing-viewer__view-space--color:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:var(--width);background-color:var(--tk-color-secondary-200, rgba(158, 119, 237, .1019607843));opacity:.5}.spacing-viewer__copy{display:flex;flex-direction:row;gap:var(--tk-spacing-4);align-items:center}.spacing-viewer__suffix{padding:var(--tk-spacing-1);border:1px solid var(--tk-color-neutral-200, #cdcdcd);border-radius:var(--tk-rounded-1, 4px);font-size:12px;cursor:pointer}:host{display:inline-flex;align-items:center;margin-left:var(--tk-spacing-02, 8px)}.copy-button{background:var(--tk-color-full-white, #fff);border:1px solid var(--tk-color-primary-500, #6ad0bc);border-radius:var(--tk-rounded-scale-04, 16px);padding:2px var(--tk-spacing-3, 12px);cursor:pointer;display:inline-flex;align-items:center;font-size:12px;color:var(--tk-color-secondary-900, #16006f);font-weight:500;box-shadow:none;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}.copy-button:hover:not([disabled]){background:var(--tk-color-primary-500, #6ad0bc);color:#fff;border-color:var(--tk-color-primary-500, #6ad0bc)}.copy-button:active{background:#e6f5ee;color:var(--tk-color-secondary-900, #16006f)}.copy-success-message{color:var(--tk-color-primary-500, #6ad0bc);font-weight:500;background:var(--tk-color-full-white, #fff);border-radius:var(--tk-rounded-scale-03, 8px);font-size:12px;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.illustration-doc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:var(--tk-spacing-5) 0;gap:var(--tk-spacing-4)}.illustration-doc__illustration-container{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-3);display:inline-flex;flex-direction:column;gap:var(--tk-spacing-2);justify-content:space-between}.illustration-doc__illustration{width:150px;height:150px}.illustration-doc__illustration svg{object-fit:contain;height:100%;width:100%}.illustration-doc__illustration-name{color:var(--tk-text-default-800);background-color:var(--tk-color-neutral-100);font-size:12px;border-radius:var(--tk-rounded-scale-03);padding:var(--tk-spacing-2)}.illustration-doc__copy-clipboard{text-align:center}.illustration-doc__no-found{color:var(--tk-text-default-700);text-align:center;display:flex;flex-direction:column;align-items:center}.illustration-doc input{margin-bottom:var(--tk-spacing-4);padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);width:100%;font-size:var(--tk-font-size-2, 16px)}.illustration-doc .illustration-doc__illustration-tags{font-size:var(--tk-font-size-2, 10px);color:var(--tk-text-default-600)}.paginator-doc{display:flex;justify-content:flex-end;align-items:center;gap:var(--tk-spacing-2)}.paginator-doc__buttons-nav{padding:var(--tk-spacing-1) var(--tk-spacing-2);font-size:var(--tk-font-size-2, 12px);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft)}.paginator-doc__buttons-text{font-size:var(--tk-font-size-2, 12px)!important;color:var(--tk-text-default-700)}.branding-doc-wrapper{margin:var(--tk-spacing-7) 0!important;padding:var(--tk-spacing-8)!important;max-width:400px;width:fit-content;position:relative}.branding-doc-wrapper.mark-border{border:var(--tk-spacing-8) solid var(--tk-color-danger-100);padding:0!important;margin:var(--tk-spacing-7)!important}.branding-doc-wrapper.mark-border:after{content:\"40px\";position:absolute;left:-40px;top:calc(3px + 100%);height:40px;font-size:12px;border-bottom:2px solid #000;display:flex;align-items:center;padding-left:8px;bottom:0}.branding-doc-wrapper.mark-border:before{content:\"40px\";position:absolute;left:-45px;top:-40px;height:40px;font-size:12px;border-left:2px solid #000;display:flex;align-items:center;padding-left:8px}.dark{background-color:var(--tk-color-neutral-800);color:var(--tk-color-full-white)}.branding-doc-content{height:100px;max-height:100px;width:fit-content}.branding-doc-content svg,.branding-doc-content img{height:100%;max-height:100px;width:100%;object-fit:contain}.branding-doc-content.mark-border:after{content:\"100px\";position:absolute;top:0;right:-90px;display:flex;align-items:center;height:100px;border-left:2px solid;padding-left:8px;font-size:12px}.svg-icon{display:inline-block;width:fit-content}.svg-icon[color=primary]{color:var(--tk-color-primary-500)}.svg-icon[color=secondary]{color:var(--tk-color-secondary-500)}.svg-icon[color=danger]{color:var(--tk-color-danger-500)}.svg-icon[color=warning]{color:var(--tk-color-warning-700)}.svg-icon[color=info]{color:var(--tk-color-info-500)}.svg-icon[color=light]{color:var(--tk-color-full-white)}.svg-icon[disabled=true],.svg-icon[data-disabled=true]{color:var(--tk-color-neutral-500)!important}.svg-icon__cu[size=\"2xs\"],.svg-icon__cu[data-size=\"2xs\"]{font-size:.625em}.svg-icon__cu[size=xs],.svg-icon__cu[data-size=xs]{font-size:.75em}.svg-icon__cu[size=sm],.svg-icon__cu[data-size=sm]{font-size:.875em}.svg-icon__cu[size=lg],.svg-icon__cu[data-size=lg]{font-size:1.25em}.svg-icon__cu[size=xl],.svg-icon__cu[data-size=xl]{font-size:1.5em}.svg-icon__cu[size=\"2xl\"],.svg-icon__cu[data-size=\"2xl\"]{font-size:2em}.svg-icon__cu[size=\"1x\"],.svg-icon__cu[data-size=\"1x\"]{font-size:1em}.svg-icon__cu[size=\"2x\"],.svg-icon__cu[data-size=\"2x\"]{font-size:2em}.svg-icon__cu[size=\"3x\"],.svg-icon__cu[data-size=\"3x\"]{font-size:3em}.svg-icon__cu[size=\"4x\"],.svg-icon__cu[data-size=\"4x\"]{font-size:4em}.svg-icon__cu[size=\"5x\"],.svg-icon__cu[data-size=\"5x\"]{font-size:5em}svg{width:100%;height:100%}.icons-doc{font-family:Poppins,sans-serif}.icons-doc__icon-search{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-2, 8px)}.icons-doc input,.icons-doc select{padding:var(--tk-spacing-2);border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);font-size:var(--tk-font-size-2, 16px);flex:1 1 60%}.icons-doc select{flex:1 1 20%}.icons-doc__container{padding:20px 0}.icons-doc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:var(--tk-spacing-5) 0;gap:var(--tk-spacing-4)}.icons-doc__icon-card{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-3);display:inline-flex;flex-direction:column;gap:var(--tk-spacing-2);justify-content:space-between}.icons-doc__icon-name{color:var(--tk-text-default-800);background-color:var(--tk-color-neutral-100);font-size:12px;border-radius:var(--tk-rounded-scale-03);padding:var(--tk-spacing-2)}.icons-doc__icon-tags{font-size:var(--tk-font-size-2, 10px)!important;color:var(--tk-text-default-600)}.icon-doc-block,.copy-to-clipboard{display:flex;justify-content:center}.icon-colors{display:flex;gap:var(--tk-spacing-2, 8px);flex-direction:row;width:fit-content;padding:var(--tk-spacing-2, 8px);border-radius:var(--tk-rounded-scale-02);align-items:center}.icon-colors--bg-black{background-color:var(--tk-color-neutral-700)}.icon-colors--bg-white{background-color:var(--tk-color-full-white)}.icon-size-block{display:flex;gap:var(--tk-spacing-4, 16px)}.icon-size-block__content{border-radius:var(--tk-rounded-scale-02);border:1px solid var(--tk-border-soft);padding:var(--tk-spacing-5, 20px)}.icon-size{display:flex;gap:var(--tk-spacing-2, 8px);flex-direction:row;width:fit-content;padding:var(--tk-spacing-2, 8px);border-radius:var(--tk-rounded-scale-02);align-items:center}.table-of-content__container{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-4, 16px);min-width:0}.table-of-content__content{flex:1 1 0%;min-width:0;overflow-wrap:anywhere}.table-of-content__toc{position:sticky;top:0;padding:var(--tk-spacing-3, 12px);max-height:100vh;overflow:auto}.grid-container-doc{background-color:var(--tk-color-neutral-100);border-radius:var(--tk-rounded-scale-02);width:100%;min-width:fit-content}.grid-item-doc{border-radius:var(--tk-rounded-scale-01);background-color:var(--tk-color-full-white);padding:var(--tk-spacing-1);min-height:32px}.general{font-family:Poppins,sans-serif;padding:0;margin:0}.h1-heading{font-size:var(--tk-typography-h1-heading-fontSize);font-weight:var(--tk-typography-h1-heading-fontWeight)}.h2-heading{font-size:var(--tk-typography-h2-heading-fontSize);font-weight:var(--tk-typography-h2-heading-fontWeight)}.h3-heading{font-size:var(--tk-typography-h3-heading-fontSize);font-weight:var(--tk-typography-h3-heading-fontWeight)}.h4-heading{font-size:var(--tk-typography-h4-heading-fontSize);font-weight:var(--tk-typography-h4-heading-fontWeight)}.h5-heading{font-size:var(--tk-typography-h5-heading-fontSize);font-weight:var(--tk-typography-h5-heading-fontWeight)}.h6-heading{font-size:var(--tk-typography-h6-heading-fontSize);font-weight:var(--tk-typography-h6-heading-fontWeight)}.subtitle1{font-size:var(--tk-typography-subtitle1-fontSize);font-weight:var(--tk-typography-subtitle1-fontWeight)}.subtitle2{font-size:var(--tk-typography-subtitle2-fontSize);font-weight:var(--tk-typography-subtitle2-fontWeight)}.body1{font-size:var(--tk-typography-body1-fontSize);font-weight:var(--tk-typography-body1-fontWeight)}.body2{font-size:var(--tk-typography-body2-fontSize);font-weight:var(--tk-typography-body2-fontWeight)}.p1-paragraph{font-size:var(--tk-typography-p1-paragraph-fontSize);font-weight:var(--tk-typography-p1-paragraph-fontWeight)}.underline-text{font-size:var(--tk-typography-underline-fontSize);font-weight:var(--tk-typography-underline-fontWeight);text-decoration:\"underline\"}.color-tk-color-primary-900{color:var(--tk-color-primary-900)}.color-tk-color-primary-800{color:var(--tk-color-primary-800)}.color-tk-color-primary-700{color:var(--tk-color-primary-700)}.color-tk-color-primary-600{color:var(--tk-color-primary-600)}.color-tk-color-primary-500{color:var(--tk-color-primary-500)}.color-tk-color-primary-400{color:var(--tk-color-primary-400)}.color-tk-color-primary-300{color:var(--tk-color-primary-300)}.color-tk-color-primary-200{color:var(--tk-color-primary-200)}.color-tk-color-primary-100{color:var(--tk-color-primary-100)}.color-tk-color-primary{color:var(--tk-color-primary-900)}.color-tk-color-secondary-900{color:var(--tk-color-secondary-900)}.color-tk-color-secondary-800{color:var(--tk-color-secondary-800)}.color-tk-color-secondary-700{color:var(--tk-color-secondary-700)}.color-tk-color-secondary-600{color:var(--tk-color-secondary-600)}.color-tk-color-secondary-500{color:var(--tk-color-secondary-500)}.color-tk-color-secondary-400{color:var(--tk-color-secondary-400)}.color-tk-color-secondary-300{color:var(--tk-color-secondary-300)}.color-tk-color-secondary-200{color:var(--tk-color-secondary-200)}.color-tk-color-secondary-100{color:var(--tk-color-secondary-100)}.color-tk-color-secondary{color:var(--tk-color-secondary-900)}.color-tk-color-accent-900{color:var(--tk-color-accent-900)}.color-tk-color-accent-800{color:var(--tk-color-accent-800)}.color-tk-color-accent-700{color:var(--tk-color-accent-700)}.color-tk-color-accent-600{color:var(--tk-color-accent-600)}.color-tk-color-accent-500{color:var(--tk-color-accent-500)}.color-tk-color-accent-400{color:var(--tk-color-accent-400)}.color-tk-color-accent-300{color:var(--tk-color-accent-300)}.color-tk-color-accent-200{color:var(--tk-color-accent-200)}.color-tk-color-accent-100{color:var(--tk-color-accent-100)}.color-tk-color-accent{color:var(--tk-color-accent-500)}.color-tk-color-neutral-900{color:var(--tk-color-neutral-900)}.color-tk-color-neutral-800{color:var(--tk-color-neutral-800)}.color-tk-color-neutral-700{color:var(--tk-color-neutral-700)}.color-tk-color-neutral-600{color:var(--tk-color-neutral-600)}.color-tk-color-neutral-500{color:var(--tk-color-neutral-500)}.color-tk-color-neutral-400{color:var(--tk-color-neutral-400)}.color-tk-color-neutral-300{color:var(--tk-color-neutral-300)}.color-tk-color-neutral-200{color:var(--tk-color-neutral-200)}.color-tk-color-neutral-100{color:var(--tk-color-neutral-100)}.color-tk-color-neutral{color:var(--tk-color-neutral-500)}.color-tk-color-success-900{color:var(--tk-color-success-900)}.color-tk-color-success-800{color:var(--tk-color-success-800)}.color-tk-color-success-700{color:var(--tk-color-success-700)}.color-tk-color-success-600{color:var(--tk-color-success-600)}.color-tk-color-success-500{color:var(--tk-color-success-500)}.color-tk-color-success-400{color:var(--tk-color-success-400)}.color-tk-color-success-300{color:var(--tk-color-success-300)}.color-tk-color-success-200{color:var(--tk-color-success-200)}.color-tk-color-success-100{color:var(--tk-color-success-100)}.color-tk-color-success{color:var(--tk-color-success-500)}.color-tk-color-danger-900{color:var(--tk-color-danger-900)}.color-tk-color-danger-800{color:var(--tk-color-danger-800)}.color-tk-color-danger-700{color:var(--tk-color-danger-700)}.color-tk-color-danger-600{color:var(--tk-color-danger-600)}.color-tk-color-danger-500{color:var(--tk-color-danger-500)}.color-tk-color-danger-400{color:var(--tk-color-danger-400)}.color-tk-color-danger-300{color:var(--tk-color-danger-300)}.color-tk-color-danger-200{color:var(--tk-color-danger-200)}.color-tk-color-danger-100{color:var(--tk-color-danger-100)}.color-tk-color-danger{color:var(--tk-color-danger-500)}.color-tk-color-info-900{color:var(--tk-color-info-900)}.color-tk-color-info-800{color:var(--tk-color-info-800)}.color-tk-color-info-700{color:var(--tk-color-info-700)}.color-tk-color-info-600{color:var(--tk-color-info-600)}.color-tk-color-info-500{color:var(--tk-color-info-500)}.color-tk-color-info-400{color:var(--tk-color-info-400)}.color-tk-color-info-300{color:var(--tk-color-info-300)}.color-tk-color-info-200{color:var(--tk-color-info-200)}.color-tk-color-info-100{color:var(--tk-color-info-100)}.color-tk-color-info{color:var(--tk-color-info-500)}.color-tk-color-warning-900{color:var(--tk-color-warning-900)}.color-tk-color-warning-800{color:var(--tk-color-warning-800)}.color-tk-color-warning-700{color:var(--tk-color-warning-700)}.color-tk-color-warning-600{color:var(--tk-color-warning-600)}.color-tk-color-warning-500{color:var(--tk-color-warning-500)}.color-tk-color-warning-400{color:var(--tk-color-warning-400)}.color-tk-color-warning-300{color:var(--tk-color-warning-300)}.color-tk-color-warning-200{color:var(--tk-color-warning-200)}.color-tk-color-warning-100{color:var(--tk-color-warning-100)}.color-tk-color-warning{color:var(--tk-color-warning-500)}.color-tk-color-white,.color-tk-color-white-900{color:var(--tk-color-white-900)}.color-tk-color-white-800{color:var(--tk-color-white-800)}.color-tk-color-black,.color-tk-color-black-900{color:var(--tk-color-black-900)}.color-tk-color-text-900{color:var(--tk-color-text-900)}.color-tk-color-text-800{color:var(--tk-color-text-800)}.color-tk-color-text-700{color:var(--tk-color-text-700)}.color-tk-color-text-600{color:var(--tk-color-text-600)}.color-tk-color-text-500,.color-tk-color-text{color:var(--tk-color-text-500)}.color-tk-color-text-primary-900{color:var(--tk-color-text-primary-900)}.color-tk-color-text-primary-800{color:var(--tk-color-text-primary-800)}.color-tk-color-text-primary-700{color:var(--tk-color-text-primary-700)}.color-tk-color-text-primary-500{color:var(--tk-color-text-primary-500)}.color-tk-color-text-primary-400{color:var(--tk-color-text-primary-400)}.color-tk-color-text-primary-300{color:var(--tk-color-text-primary-300)}.color-tk-color-text-primary-200{color:var(--tk-color-text-primary-200)}.color-tk-color-text-primary-100{color:var(--tk-color-text-primary-100)}.color-tk-color-text-primary{color:var(--tk-color-text-primary-500)}.color-tk-color-text-secondary-900{color:var(--tk-color-text-secondary-900)}.color-tk-color-text-secondary-800{color:var(--tk-color-text-secondary-800)}.color-tk-color-text-secondary-700{color:var(--tk-color-text-secondary-700)}.color-tk-color-text-secondary-500{color:var(--tk-color-text-secondary-500)}.color-tk-color-text-secondary-400{color:var(--tk-color-text-secondary-400)}.color-tk-color-text-secondary-300{color:var(--tk-color-text-secondary-300)}.color-tk-color-text-secondary-200{color:var(--tk-color-text-secondary-200)}.color-tk-color-text-secondary-100{color:var(--tk-color-text-secondary-100)}.color-tk-color-text-secondary{color:var(--tk-color-text-secondary-500)}.color-tk-color-text-accent-900{color:var(--tk-color-text-accent-900)}.color-tk-color-text-accent-800{color:var(--tk-color-text-accent-800)}.color-tk-color-text-accent-700{color:var(--tk-color-text-accent-700)}.color-tk-color-text-accent-500{color:var(--tk-color-text-accent-500)}.color-tk-color-text-accent-400{color:var(--tk-color-text-accent-400)}.color-tk-color-text-accent-300{color:var(--tk-color-text-accent-300)}.color-tk-color-text-accent-200{color:var(--tk-color-text-accent-200)}.color-tk-color-text-accent-100{color:var(--tk-color-text-accent-100)}.color-tk-color-text-accent{color:var(--tk-color-text-accent-500)}\n"] }]
|
|
19
19
|
}], propDecorators: { size: [{
|
|
20
20
|
type: Input
|
|
21
21
|
}], color: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-typography.mjs","sources":["../../../projects/design-system/components/typography/src/typography.component.ts","../../../projects/design-system/components/typography/src/typography.component.html","../../../projects/design-system/components/typography/tekus-design-system-components-typography.ts"],"sourcesContent":["import {\n NgSwitch,\n NgSwitchCase,\n NgSwitchDefault,\n NgTemplateOutlet,\n} from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'tk-typography',\n standalone: true,\n imports: [NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet],\n templateUrl: './typography.component.html',\n styleUrl: './typography.component.scss',\n})\nexport class TypographyComponent {\n @Input() size: string = '';\n @Input() color: string = '';\n @Input() weight: string = '';\n @Input() type:\n | 'h1-heading'\n | 'h2-heading'\n | 'h3-heading'\n | 'h4-heading'\n | 'h5-heading'\n | 'h6-heading'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'p1-paragraph'\n | 'underline-text' = 'body1';\n @Input() lineBreak: boolean = false;\n}\n","<ng-container [ngSwitch]=\"type\">\n <h1\n *ngSwitchCase=\"'h1-heading'\"\n class=\"general h1-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h1>\n <h2\n *ngSwitchCase=\"'h2-heading'\"\n class=\"general h2-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h2>\n <h3\n *ngSwitchCase=\"'h3-heading'\"\n class=\"general h3-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h4\n *ngSwitchCase=\"'h4-heading'\"\n class=\"general h4-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h4>\n <h5\n *ngSwitchCase=\"'h5-heading'\"\n class=\"general h5-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h5>\n <h6\n *ngSwitchCase=\"'h6-heading'\"\n class=\"general h6-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h6>\n <h3\n *ngSwitchCase=\"'subtitle1'\"\n class=\"general subtitle1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h3\n *ngSwitchCase=\"'subtitle2'\"\n class=\"general subtitle2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <p\n *ngSwitchCase=\"'body1'\"\n class=\"general body1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'body2'\"\n class=\"general body2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'p1-paragraph'\"\n class=\"general p1-paragraph\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'underline-text'\"\n class=\"general underline-text\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchDefault\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n</ng-container>\n\n<ng-template #text>\n <ng-content></ng-content>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAea,mBAAmB,CAAA;AAPhC,IAAA,WAAA,GAAA;QAQW,IAAI,CAAA,IAAA,GAAW,EAAE;QACjB,IAAK,CAAA,KAAA,GAAW,EAAE;QAClB,IAAM,CAAA,MAAA,GAAW,EAAE;QACnB,IAAI,CAAA,IAAA,GAYU,OAAO;QACrB,IAAS,CAAA,SAAA,GAAY,KAAK;AACpC;+GAlBY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfhC,gsHAyHA,ED9GY,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-typography.mjs","sources":["../../../projects/design-system/components/typography/src/typography.component.ts","../../../projects/design-system/components/typography/src/typography.component.html","../../../projects/design-system/components/typography/tekus-design-system-components-typography.ts"],"sourcesContent":["import {\n NgSwitch,\n NgSwitchCase,\n NgSwitchDefault,\n NgTemplateOutlet,\n} from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'tk-typography',\n standalone: true,\n imports: [NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet],\n templateUrl: './typography.component.html',\n styleUrl: './typography.component.scss',\n})\nexport class TypographyComponent {\n @Input() size: string = '';\n @Input() color: string = '';\n @Input() weight: string = '';\n @Input() type:\n | 'h1-heading'\n | 'h2-heading'\n | 'h3-heading'\n | 'h4-heading'\n | 'h5-heading'\n | 'h6-heading'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'p1-paragraph'\n | 'underline-text' = 'body1';\n @Input() lineBreak: boolean = false;\n}\n","<ng-container [ngSwitch]=\"type\">\n <h1\n *ngSwitchCase=\"'h1-heading'\"\n class=\"general h1-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h1>\n <h2\n *ngSwitchCase=\"'h2-heading'\"\n class=\"general h2-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h2>\n <h3\n *ngSwitchCase=\"'h3-heading'\"\n class=\"general h3-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h4\n *ngSwitchCase=\"'h4-heading'\"\n class=\"general h4-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h4>\n <h5\n *ngSwitchCase=\"'h5-heading'\"\n class=\"general h5-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h5>\n <h6\n *ngSwitchCase=\"'h6-heading'\"\n class=\"general h6-heading\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h6>\n <h3\n *ngSwitchCase=\"'subtitle1'\"\n class=\"general subtitle1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <h3\n *ngSwitchCase=\"'subtitle2'\"\n class=\"general subtitle2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </h3>\n <p\n *ngSwitchCase=\"'body1'\"\n class=\"general body1\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'body2'\"\n class=\"general body2\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'p1-paragraph'\"\n class=\"general p1-paragraph\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchCase=\"'underline-text'\"\n class=\"general underline-text\"\n [class]=\"'color-' + color\"\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n <p\n *ngSwitchDefault\n [class.line-break]=\"lineBreak\"\n [style.font-size]=\"size\"\n [style.font-weight]=\"weight\">\n <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n </p>\n</ng-container>\n\n<ng-template #text>\n <ng-content></ng-content>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAea,mBAAmB,CAAA;AAPhC,IAAA,WAAA,GAAA;QAQW,IAAI,CAAA,IAAA,GAAW,EAAE;QACjB,IAAK,CAAA,KAAA,GAAW,EAAE;QAClB,IAAM,CAAA,MAAA,GAAW,EAAE;QACnB,IAAI,CAAA,IAAA,GAYU,OAAO;QACrB,IAAS,CAAA,SAAA,GAAY,KAAK;AACpC;+GAlBY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfhC,gsHAyHA,ED9GY,MAAA,EAAA,CAAA,krsBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAQ,6EAAE,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIxD,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP,CAAC,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,gsHAAA,EAAA,MAAA,EAAA,CAAA,krsBAAA,CAAA,EAAA;8BAK3D,IAAI,EAAA,CAAA;sBAAZ;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBAaQ,SAAS,EAAA,CAAA;sBAAjB;;;AEhCH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tekus/design-system",
|
|
3
3
|
"description": "Tekus design system library",
|
|
4
|
-
"version": "5.0.
|
|
4
|
+
"version": "5.0.1",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"peerDependencies": {
|
|
7
|
-
"@angular/core": "^
|
|
8
|
-
"@angular/common": "^
|
|
9
|
-
"@angular/animations": "^
|
|
10
|
-
"@
|
|
11
|
-
"@
|
|
12
|
-
"@
|
|
7
|
+
"@angular/core": "^19.2.15",
|
|
8
|
+
"@angular/common": "^19.2.15",
|
|
9
|
+
"@angular/animations": "^19.2.15",
|
|
10
|
+
"@angular/cdk": "^19.2.15",
|
|
11
|
+
"@angular/material": "^19.2.15",
|
|
12
|
+
"@primeng/themes": "^19.1.4",
|
|
13
|
+
"primeng": "^19.1.4",
|
|
14
|
+
"@fortawesome/pro-solid-svg-icons": "^6.7.2",
|
|
15
|
+
"@fortawesome/angular-fontawesome": "^1.0.0",
|
|
16
|
+
"@fortawesome/fontawesome-svg-core": "^6.7.2"
|
|
13
17
|
},
|
|
14
18
|
"dependencies": {
|
|
15
19
|
"tslib": "^2.3.0"
|
|
@@ -51,18 +55,10 @@
|
|
|
51
55
|
"types": "./components/button/index.d.ts",
|
|
52
56
|
"default": "./fesm2022/tekus-design-system-components-button.mjs"
|
|
53
57
|
},
|
|
54
|
-
"./components/dropdown-list": {
|
|
55
|
-
"types": "./components/dropdown-list/index.d.ts",
|
|
56
|
-
"default": "./fesm2022/tekus-design-system-components-dropdown-list.mjs"
|
|
57
|
-
},
|
|
58
58
|
"./components/fallback-view": {
|
|
59
59
|
"types": "./components/fallback-view/index.d.ts",
|
|
60
60
|
"default": "./fesm2022/tekus-design-system-components-fallback-view.mjs"
|
|
61
61
|
},
|
|
62
|
-
"./components/forms": {
|
|
63
|
-
"types": "./components/forms/index.d.ts",
|
|
64
|
-
"default": "./fesm2022/tekus-design-system-components-forms.mjs"
|
|
65
|
-
},
|
|
66
62
|
"./components/grid-container": {
|
|
67
63
|
"types": "./components/grid-container/index.d.ts",
|
|
68
64
|
"default": "./fesm2022/tekus-design-system-components-grid-container.mjs"
|
|
@@ -75,37 +71,13 @@
|
|
|
75
71
|
"types": "./components/illustration/index.d.ts",
|
|
76
72
|
"default": "./fesm2022/tekus-design-system-components-illustration.mjs"
|
|
77
73
|
},
|
|
78
|
-
"./components/search-bar": {
|
|
79
|
-
"types": "./components/search-bar/index.d.ts",
|
|
80
|
-
"default": "./fesm2022/tekus-design-system-components-search-bar.mjs"
|
|
81
|
-
},
|
|
82
74
|
"./components/typography": {
|
|
83
75
|
"types": "./components/typography/index.d.ts",
|
|
84
76
|
"default": "./fesm2022/tekus-design-system-components-typography.mjs"
|
|
85
77
|
},
|
|
86
|
-
"./services/design-tokens": {
|
|
87
|
-
"types": "./services/design-tokens/index.d.ts",
|
|
88
|
-
"default": "./fesm2022/tekus-design-system-services-design-tokens.mjs"
|
|
89
|
-
},
|
|
90
|
-
"./services/typography": {
|
|
91
|
-
"types": "./services/typography/index.d.ts",
|
|
92
|
-
"default": "./fesm2022/tekus-design-system-services-typography.mjs"
|
|
93
|
-
},
|
|
94
78
|
"./utils/sanitizer-utils": {
|
|
95
79
|
"types": "./utils/sanitizer-utils/index.d.ts",
|
|
96
80
|
"default": "./fesm2022/tekus-design-system-utils-sanitizer-utils.mjs"
|
|
97
|
-
},
|
|
98
|
-
"./components/forms/form-autocomplete-field": {
|
|
99
|
-
"types": "./components/forms/form-autocomplete-field/index.d.ts",
|
|
100
|
-
"default": "./fesm2022/tekus-design-system-components-forms-form-autocomplete-field.mjs"
|
|
101
|
-
},
|
|
102
|
-
"./components/forms/form-chips-autocomplete-field": {
|
|
103
|
-
"types": "./components/forms/form-chips-autocomplete-field/index.d.ts",
|
|
104
|
-
"default": "./fesm2022/tekus-design-system-components-forms-form-chips-autocomplete-field.mjs"
|
|
105
|
-
},
|
|
106
|
-
"./components/forms/form-input-field": {
|
|
107
|
-
"types": "./components/forms/form-input-field/index.d.ts",
|
|
108
|
-
"default": "./fesm2022/tekus-design-system-components-forms-form-input-field.mjs"
|
|
109
81
|
}
|
|
110
82
|
},
|
|
111
83
|
"module": "fesm2022/tekus-design-system.mjs",
|
package/tokens/index.scss
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/dropdown-list.component';
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { DropdownListItem } from '@tekus/design-system/core/types';
|
|
2
|
-
import { OnInit, EventEmitter } from '@angular/core';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class DropdownListComponent implements OnInit {
|
|
5
|
-
/**
|
|
6
|
-
* Search field input value
|
|
7
|
-
* @ignore
|
|
8
|
-
*/
|
|
9
|
-
inputValue: string;
|
|
10
|
-
/**
|
|
11
|
-
* Selected value
|
|
12
|
-
* @ignore
|
|
13
|
-
*/
|
|
14
|
-
selectedValue: {
|
|
15
|
-
Value: string;
|
|
16
|
-
ViewValue: string;
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* Filtered data
|
|
20
|
-
* @ignore
|
|
21
|
-
*/
|
|
22
|
-
filteredData: DropdownListItem<string>[];
|
|
23
|
-
/**
|
|
24
|
-
* Is dropdown list visible
|
|
25
|
-
* @ignore
|
|
26
|
-
*/
|
|
27
|
-
isDropDownListVisible: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Icon
|
|
30
|
-
* @ignore
|
|
31
|
-
*/
|
|
32
|
-
readonly faXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
33
|
-
/**
|
|
34
|
-
* Icon
|
|
35
|
-
* @ignore
|
|
36
|
-
*/
|
|
37
|
-
readonly faCheck: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
38
|
-
/**
|
|
39
|
-
* Icon
|
|
40
|
-
* @ignore
|
|
41
|
-
*/
|
|
42
|
-
readonly faCaretUp: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
43
|
-
/**
|
|
44
|
-
* Icon
|
|
45
|
-
* @ignore
|
|
46
|
-
*/
|
|
47
|
-
readonly faCaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
48
|
-
/**
|
|
49
|
-
* Data for dropdown list
|
|
50
|
-
*/
|
|
51
|
-
data: DropdownListItem<string>[];
|
|
52
|
-
/**
|
|
53
|
-
* Dropdown list hint label
|
|
54
|
-
* @default ''
|
|
55
|
-
*/
|
|
56
|
-
hintLabel: string;
|
|
57
|
-
/**
|
|
58
|
-
* Dropdown list search field placeholder
|
|
59
|
-
* @default ''
|
|
60
|
-
*/
|
|
61
|
-
searchFieldPlaceHolder: string;
|
|
62
|
-
/**
|
|
63
|
-
* Width of the dropdown list
|
|
64
|
-
* @default 13rem
|
|
65
|
-
*/
|
|
66
|
-
width?: string;
|
|
67
|
-
/**
|
|
68
|
-
* What background color to use
|
|
69
|
-
* @default #fff
|
|
70
|
-
*/
|
|
71
|
-
backgroundColor?: string;
|
|
72
|
-
/**
|
|
73
|
-
* Selected value changes handler
|
|
74
|
-
*/
|
|
75
|
-
selectedValueChange: EventEmitter<string>;
|
|
76
|
-
/**
|
|
77
|
-
* @ignore
|
|
78
|
-
* Component lifecycle method
|
|
79
|
-
*/
|
|
80
|
-
ngOnInit(): void;
|
|
81
|
-
/**
|
|
82
|
-
* @ignore
|
|
83
|
-
* Component method to load data
|
|
84
|
-
*/
|
|
85
|
-
private loadData;
|
|
86
|
-
/**
|
|
87
|
-
* @ignore
|
|
88
|
-
* Component method to handle click on dropdown list
|
|
89
|
-
*/
|
|
90
|
-
onClickDropDownList(): void;
|
|
91
|
-
/**
|
|
92
|
-
* @ignore
|
|
93
|
-
* Component method to handle click on clear selected value
|
|
94
|
-
*/
|
|
95
|
-
onClickClearSelectedValue(): void;
|
|
96
|
-
/**
|
|
97
|
-
* @ignore
|
|
98
|
-
* Component method to handle click on clear input value
|
|
99
|
-
*/
|
|
100
|
-
onClickClearInputValue(): void;
|
|
101
|
-
/**
|
|
102
|
-
* @ignore
|
|
103
|
-
* Component method to handle click on dropdown list item
|
|
104
|
-
*/
|
|
105
|
-
onClickListItem(item: DropdownListItem<string | number>): void;
|
|
106
|
-
/**
|
|
107
|
-
* @ignore
|
|
108
|
-
* Component method to filter data
|
|
109
|
-
*/
|
|
110
|
-
filter(): void;
|
|
111
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListComponent, never>;
|
|
112
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownListComponent, "tk-dropdown-list", never, { "data": { "alias": "data"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "searchFieldPlaceHolder": { "alias": "searchFieldPlaceHolder"; "required": false; }; "width": { "alias": "width"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
|
|
113
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/form-autocomplete-field.component';
|