@taiga-ui/core 4.52.0-canary.6043e8f → 4.52.0-canary.632a035
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.
|
@@ -38,14 +38,14 @@ class TuiLoader {
|
|
|
38
38
|
return !tuiSizeBigger(this.size);
|
|
39
39
|
}
|
|
40
40
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiLoader, isStandalone: true, selector: "tui-loader", inputs: { size: "size", inheritColor: "inheritColor", overlay: "overlay", textContent: "textContent", loading: ["showLoader", "loading"] }, host: { properties: { "class._loading": "loading", "attr.data-size": "size" } }, ngImport: i0, template: "<fieldset\n class=\"t-content\"\n [attr.inert]=\"loading || null\"\n [class.t-content_has-overlay]=\"overlay && loading\"\n [class.t-content_loading]=\"loading\"\n [disabled]=\"loading && !isApple\"\n>\n <ng-content />\n</fieldset>\n\n@if (loading) {\n <div\n class=\"t-loader\"\n [class.t-loader_horizontal]=\"isHorizontal\"\n [class.t-loader_inherit-color]=\"inheritColor\"\n >\n <svg\n automation-id=\"tui-loader__loader\"\n focusable=\"false\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-icon\"\n >\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-circle\"\n />\n </svg>\n @if (textContent) {\n <div\n automation-id=\"tui-loader__text\"\n class=\"t-text\"\n [class.t-text_horizontal]=\"isHorizontal\"\n >\n <ng-container *polymorpheusOutlet=\"textContent as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n </div>\n}\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin
|
|
41
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiLoader, isStandalone: true, selector: "tui-loader", inputs: { size: "size", inheritColor: "inheritColor", overlay: "overlay", textContent: "textContent", loading: ["showLoader", "loading"] }, host: { properties: { "class._loading": "loading", "attr.data-size": "size" } }, ngImport: i0, template: "<fieldset\n class=\"t-content\"\n [attr.inert]=\"loading || null\"\n [class.t-content_has-overlay]=\"overlay && loading\"\n [class.t-content_loading]=\"loading\"\n [disabled]=\"loading && !isApple\"\n>\n <ng-content />\n</fieldset>\n\n@if (loading) {\n <div\n class=\"t-loader\"\n [class.t-loader_horizontal]=\"isHorizontal\"\n [class.t-loader_inherit-color]=\"inheritColor\"\n >\n <svg\n automation-id=\"tui-loader__loader\"\n focusable=\"false\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-icon\"\n >\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-circle\"\n />\n </svg>\n @if (textContent) {\n <div\n automation-id=\"tui-loader__text\"\n class=\"t-text\"\n [class.t-text_horizontal]=\"isHorizontal\"\n >\n <ng-container *polymorpheusOutlet=\"textContent as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n </div>\n}\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin:0 calc(var(--t-diameter) / -2);border-radius:100%;overflow:hidden;animation:tuiLoaderRotate 4s linear infinite}@supports (-webkit-hyphens: none){.t-icon{overflow:visible}}@keyframes tuiLoaderDashOffset{0%{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}50%{stroke-dashoffset:calc(.05 * calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness))))}to{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}}.t-circle{r:calc(var(--t-diameter) / 2 - var(--tui-thickness));stroke-dasharray:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)));fill:none;stroke:inherit;stroke-width:max(var(--tui-thickness),1.5px);animation:tuiLoaderDashOffset 4s linear infinite}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
42
42
|
}
|
|
43
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLoader, decorators: [{
|
|
44
44
|
type: Component,
|
|
45
45
|
args: [{ selector: 'tui-loader', imports: [PolymorpheusOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
46
46
|
'[class._loading]': 'loading',
|
|
47
47
|
'[attr.data-size]': 'size',
|
|
48
|
-
}, template: "<fieldset\n class=\"t-content\"\n [attr.inert]=\"loading || null\"\n [class.t-content_has-overlay]=\"overlay && loading\"\n [class.t-content_loading]=\"loading\"\n [disabled]=\"loading && !isApple\"\n>\n <ng-content />\n</fieldset>\n\n@if (loading) {\n <div\n class=\"t-loader\"\n [class.t-loader_horizontal]=\"isHorizontal\"\n [class.t-loader_inherit-color]=\"inheritColor\"\n >\n <svg\n automation-id=\"tui-loader__loader\"\n focusable=\"false\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-icon\"\n >\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-circle\"\n />\n </svg>\n @if (textContent) {\n <div\n automation-id=\"tui-loader__text\"\n class=\"t-text\"\n [class.t-text_horizontal]=\"isHorizontal\"\n >\n <ng-container *polymorpheusOutlet=\"textContent as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n </div>\n}\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin
|
|
48
|
+
}, template: "<fieldset\n class=\"t-content\"\n [attr.inert]=\"loading || null\"\n [class.t-content_has-overlay]=\"overlay && loading\"\n [class.t-content_loading]=\"loading\"\n [disabled]=\"loading && !isApple\"\n>\n <ng-content />\n</fieldset>\n\n@if (loading) {\n <div\n class=\"t-loader\"\n [class.t-loader_horizontal]=\"isHorizontal\"\n [class.t-loader_inherit-color]=\"inheritColor\"\n >\n <svg\n automation-id=\"tui-loader__loader\"\n focusable=\"false\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-icon\"\n >\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-circle\"\n />\n </svg>\n @if (textContent) {\n <div\n automation-id=\"tui-loader__text\"\n class=\"t-text\"\n [class.t-text_horizontal]=\"isHorizontal\"\n >\n <ng-container *polymorpheusOutlet=\"textContent as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n </div>\n}\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin:0 calc(var(--t-diameter) / -2);border-radius:100%;overflow:hidden;animation:tuiLoaderRotate 4s linear infinite}@supports (-webkit-hyphens: none){.t-icon{overflow:visible}}@keyframes tuiLoaderDashOffset{0%{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}50%{stroke-dashoffset:calc(.05 * calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness))))}to{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}}.t-circle{r:calc(var(--t-diameter) / 2 - var(--tui-thickness));stroke-dasharray:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)));fill:none;stroke:inherit;stroke-width:max(var(--tui-thickness),1.5px);animation:tuiLoaderDashOffset 4s linear infinite}\n"] }]
|
|
49
49
|
}], propDecorators: { size: [{
|
|
50
50
|
type: Input
|
|
51
51
|
}], inheritColor: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"taiga-ui-core-components-loader.mjs","sources":["../../../projects/core/components/loader/loader.options.ts","../../../projects/core/components/loader/loader.component.ts","../../../projects/core/components/loader/loader.template.html","../../../projects/core/components/loader/taiga-ui-core-components-loader.ts"],"sourcesContent":["import {InjectionToken, type Provider} from '@angular/core';\nimport {tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core/types';\n\nexport interface TuiLoaderOptions {\n readonly inheritColor: boolean;\n readonly overlay: boolean;\n readonly size: TuiSizeXS | TuiSizeXXL;\n}\n\n/** Default values for the loader options. */\nexport const TUI_LOADER_DEFAULT_OPTIONS: TuiLoaderOptions = {\n size: 'm',\n inheritColor: false,\n overlay: false,\n};\n\n/**\n * Default parameters for loader component\n */\nexport const TUI_LOADER_OPTIONS = new InjectionToken(\n ngDevMode ? 'TUI_LOADER_OPTIONS' : '',\n {\n factory: () => TUI_LOADER_DEFAULT_OPTIONS,\n },\n);\n\nexport function tuiLoaderOptionsProvider(options: Partial<TuiLoaderOptions>): Provider {\n return tuiProvideOptions(TUI_LOADER_OPTIONS, options, TUI_LOADER_DEFAULT_OPTIONS);\n}\n","import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';\nimport {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';\nimport {tuiIsSafari} from '@taiga-ui/cdk/utils/browser';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiSizeBigger} from '@taiga-ui/core/utils/miscellaneous';\nimport {type PolymorpheusContent, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\n\nimport {TUI_LOADER_OPTIONS} from './loader.options';\n\n@Component({\n selector: 'tui-loader',\n imports: [PolymorpheusOutlet],\n templateUrl: './loader.template.html',\n styleUrls: ['./loader.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class._loading]': 'loading',\n '[attr.data-size]': 'size',\n },\n})\nexport class TuiLoader {\n private readonly isIOS = inject(TUI_IS_IOS);\n private readonly options = inject(TUI_LOADER_OPTIONS);\n protected readonly isApple = tuiIsSafari(tuiInjectElement()) || this.isIOS;\n\n @Input()\n public size = this.options.size;\n\n @Input()\n public inheritColor = this.options.inheritColor;\n\n @Input()\n public overlay = this.options.overlay;\n\n @Input()\n public textContent: PolymorpheusContent;\n\n // TODO: Drop alias in v5\n @Input('showLoader')\n public loading = true;\n\n protected get isHorizontal(): boolean {\n return !tuiSizeBigger(this.size);\n }\n}\n","<fieldset\n class=\"t-content\"\n [attr.inert]=\"loading || null\"\n [class.t-content_has-overlay]=\"overlay && loading\"\n [class.t-content_loading]=\"loading\"\n [disabled]=\"loading && !isApple\"\n>\n <ng-content />\n</fieldset>\n\n@if (loading) {\n <div\n class=\"t-loader\"\n [class.t-loader_horizontal]=\"isHorizontal\"\n [class.t-loader_inherit-color]=\"inheritColor\"\n >\n <svg\n automation-id=\"tui-loader__loader\"\n focusable=\"false\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-icon\"\n >\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-circle\"\n />\n </svg>\n @if (textContent) {\n <div\n automation-id=\"tui-loader__text\"\n class=\"t-text\"\n [class.t-text_horizontal]=\"isHorizontal\"\n >\n <ng-container *polymorpheusOutlet=\"textContent as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAUA;AACa,MAAA,0BAA0B,GAAqB;AACxD,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,OAAO,EAAE,KAAK;;AAGlB;;AAEG;AACU,MAAA,kBAAkB,GAAG,IAAI,cAAc,CAChD,SAAS,GAAG,oBAAoB,GAAG,EAAE,EACrC;AACI,IAAA,OAAO,EAAE,MAAM,0BAA0B;AAC5C,CAAA;AAGC,SAAU,wBAAwB,CAAC,OAAkC,EAAA;IACvE,OAAO,iBAAiB,CAAC,kBAAkB,EAAE,OAAO,EAAE,0BAA0B,CAAC;AACrF;;MCTa,SAAS,CAAA;AAXtB,IAAA,WAAA,GAAA;AAYqB,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1B,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,kBAAkB,CAAC;QAClC,IAAO,CAAA,OAAA,GAAG,WAAW,CAAC,gBAAgB,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK;AAGnE,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI;AAGxB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY;AAGxC,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO;;QAO9B,IAAO,CAAA,OAAA,GAAG,IAAI;AAKxB;AAHG,IAAA,IAAc,YAAY,GAAA;AACtB,QAAA,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;+GAtB3B,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,SAAA,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBtB,2oCA0CA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"taiga-ui-core-components-loader.mjs","sources":["../../../projects/core/components/loader/loader.options.ts","../../../projects/core/components/loader/loader.component.ts","../../../projects/core/components/loader/loader.template.html","../../../projects/core/components/loader/taiga-ui-core-components-loader.ts"],"sourcesContent":["import {InjectionToken, type Provider} from '@angular/core';\nimport {tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core/types';\n\nexport interface TuiLoaderOptions {\n readonly inheritColor: boolean;\n readonly overlay: boolean;\n readonly size: TuiSizeXS | TuiSizeXXL;\n}\n\n/** Default values for the loader options. */\nexport const TUI_LOADER_DEFAULT_OPTIONS: TuiLoaderOptions = {\n size: 'm',\n inheritColor: false,\n overlay: false,\n};\n\n/**\n * Default parameters for loader component\n */\nexport const TUI_LOADER_OPTIONS = new InjectionToken(\n ngDevMode ? 'TUI_LOADER_OPTIONS' : '',\n {\n factory: () => TUI_LOADER_DEFAULT_OPTIONS,\n },\n);\n\nexport function tuiLoaderOptionsProvider(options: Partial<TuiLoaderOptions>): Provider {\n return tuiProvideOptions(TUI_LOADER_OPTIONS, options, TUI_LOADER_DEFAULT_OPTIONS);\n}\n","import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';\nimport {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';\nimport {tuiIsSafari} from '@taiga-ui/cdk/utils/browser';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiSizeBigger} from '@taiga-ui/core/utils/miscellaneous';\nimport {type PolymorpheusContent, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\n\nimport {TUI_LOADER_OPTIONS} from './loader.options';\n\n@Component({\n selector: 'tui-loader',\n imports: [PolymorpheusOutlet],\n templateUrl: './loader.template.html',\n styleUrls: ['./loader.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class._loading]': 'loading',\n '[attr.data-size]': 'size',\n },\n})\nexport class TuiLoader {\n private readonly isIOS = inject(TUI_IS_IOS);\n private readonly options = inject(TUI_LOADER_OPTIONS);\n protected readonly isApple = tuiIsSafari(tuiInjectElement()) || this.isIOS;\n\n @Input()\n public size = this.options.size;\n\n @Input()\n public inheritColor = this.options.inheritColor;\n\n @Input()\n public overlay = this.options.overlay;\n\n @Input()\n public textContent: PolymorpheusContent;\n\n // TODO: Drop alias in v5\n @Input('showLoader')\n public loading = true;\n\n protected get isHorizontal(): boolean {\n return !tuiSizeBigger(this.size);\n }\n}\n","<fieldset\n class=\"t-content\"\n [attr.inert]=\"loading || null\"\n [class.t-content_has-overlay]=\"overlay && loading\"\n [class.t-content_loading]=\"loading\"\n [disabled]=\"loading && !isApple\"\n>\n <ng-content />\n</fieldset>\n\n@if (loading) {\n <div\n class=\"t-loader\"\n [class.t-loader_horizontal]=\"isHorizontal\"\n [class.t-loader_inherit-color]=\"inheritColor\"\n >\n <svg\n automation-id=\"tui-loader__loader\"\n focusable=\"false\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-icon\"\n >\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-circle\"\n />\n </svg>\n @if (textContent) {\n <div\n automation-id=\"tui-loader__text\"\n class=\"t-text\"\n [class.t-text_horizontal]=\"isHorizontal\"\n >\n <ng-container *polymorpheusOutlet=\"textContent as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAUA;AACa,MAAA,0BAA0B,GAAqB;AACxD,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,OAAO,EAAE,KAAK;;AAGlB;;AAEG;AACU,MAAA,kBAAkB,GAAG,IAAI,cAAc,CAChD,SAAS,GAAG,oBAAoB,GAAG,EAAE,EACrC;AACI,IAAA,OAAO,EAAE,MAAM,0BAA0B;AAC5C,CAAA;AAGC,SAAU,wBAAwB,CAAC,OAAkC,EAAA;IACvE,OAAO,iBAAiB,CAAC,kBAAkB,EAAE,OAAO,EAAE,0BAA0B,CAAC;AACrF;;MCTa,SAAS,CAAA;AAXtB,IAAA,WAAA,GAAA;AAYqB,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1B,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,kBAAkB,CAAC;QAClC,IAAO,CAAA,OAAA,GAAG,WAAW,CAAC,gBAAgB,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK;AAGnE,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI;AAGxB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY;AAGxC,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO;;QAO9B,IAAO,CAAA,OAAA,GAAG,IAAI;AAKxB;AAHG,IAAA,IAAc,YAAY,GAAA;AACtB,QAAA,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;+GAtB3B,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,SAAA,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBtB,2oCA0CA,EAAA,MAAA,EAAA,CAAA,qsEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED/Bc,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FASnB,SAAS,EAAA,UAAA,EAAA,CAAA;kBAXrB,SAAS;+BACI,YAAY,EAAA,OAAA,EACb,CAAC,kBAAkB,CAAC,mBAGZ,uBAAuB,CAAC,MAAM,EACzC,IAAA,EAAA;AACF,wBAAA,kBAAkB,EAAE,SAAS;AAC7B,wBAAA,kBAAkB,EAAE,MAAM;AAC7B,qBAAA,EAAA,QAAA,EAAA,2oCAAA,EAAA,MAAA,EAAA,CAAA,qsEAAA,CAAA,EAAA;8BAQM,IAAI,EAAA,CAAA;sBADV;gBAIM,YAAY,EAAA,CAAA;sBADlB;gBAIM,OAAO,EAAA,CAAA;sBADb;gBAIM,WAAW,EAAA,CAAA;sBADjB;gBAKM,OAAO,EAAA,CAAA;sBADb,KAAK;uBAAC,YAAY;;;AEtCvB;;AAEG;;;;"}
|
|
@@ -42,7 +42,7 @@ class TuiRoot {
|
|
|
42
42
|
return this.doc.fullscreenElement === this.el || !this.child;
|
|
43
43
|
}
|
|
44
44
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiRoot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiRoot, isStandalone: true, selector: "tui-root", host: { attributes: { "data-tui-version": "4.52.0-canary.
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiRoot, isStandalone: true, selector: "tui-root", host: { attributes: { "data-tui-version": "4.52.0-canary.632a035" }, listeners: { "touchstart.passive.zoneless": "0", "document:fullscreenchange": "top.set(parent)" }, properties: { "style.--tui-duration.ms": "duration", "style.--tui-scroll-behavior": "reducedMotion ? \"auto\" : \"smooth\"", "class._mobile": "isMobileRes()" } }, hostDirectives: [{ directive: i1.TuiPlatform }, { directive: i2.TuiVisualViewport }, { directive: i3.TuiFontSize }, { directive: i4.TuiActiveZone }], ngImport: i0, template: "<div class=\"t-root-content\">\n <ng-content />\n</div>\n@if (top()) {\n @if (scrollbars) {\n <tui-scroll-controls class=\"t-root-scrollbar\" />\n }\n <tui-popups />\n <ng-content select=\"tuiOverContent\" />\n <tui-dialogs />\n <ng-content select=\"tuiOverDialogs\" />\n <tui-alerts />\n <ng-content select=\"tuiOverAlerts\" />\n <tui-dropdowns />\n <ng-content select=\"tuiOverDropdowns\" />\n <tui-hints />\n <ng-content select=\"tuiOverHints\" />\n}\n", styles: ["@keyframes tuiSkeletonVibe{to{opacity:.5}}@keyframes tuiPresent{to{content:\"\"}}@keyframes tuiFade{0%{opacity:0}}@keyframes tuiSlide{0%{transform:var(--tui-from, translateY(100%))}}@keyframes tuiScale{0%{transform:scale(var(--tui-scale, 0))}}@keyframes tuiCollapse{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.tui-enter,.tui-leave{animation-duration:var(--tui-duration);animation-timing-function:ease-in-out;pointer-events:none}.tui-leave{animation-direction:reverse}\n", ".tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.tui-zero-scrollbar::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar-thumb{display:none}body,input{margin:0}tui-root{position:relative;display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);flex:1;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 0 100vh 0;-webkit-tap-highlight-color:transparent}:root{--tui-inline-start: left;--tui-inline-end: right;--tui-inline: 1}[dir=rtl]{--tui-inline-start: right;--tui-inline-end: left;--tui-inline: -1}tui-root>.t-root-scrollbar{position:fixed;z-index:0;top:0;right:0;bottom:0;left:0}.t-root-content{position:relative;top:var(--t-root-top);block-size:100%;isolation:isolate}.t-root-content>*{--t-root-top: 0}[tuiDropdownButton][tuiDropdownButton]{display:none}\n"], dependencies: [{ kind: "component", type: TuiAlerts, selector: "tui-alerts" }, { kind: "component", type: TuiDialogs, selector: "tui-dialogs" }, { kind: "component", type: TuiDropdowns, selector: "tui-dropdowns" }, { kind: "component", type: TuiHints, selector: "tui-hints" }, { kind: "component", type: TuiPopups, selector: "tui-popups" }, { kind: "component", type: TuiScrollControls, selector: "tui-scroll-controls" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
46
46
|
}
|
|
47
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiRoot, decorators: [{
|
|
48
48
|
type: Component,
|
package/package.json
CHANGED
|
@@ -50,21 +50,16 @@
|
|
|
50
50
|
margin-inline-start: calc(var(--tui-radius-m) / 2 + var(--t-offset));
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
/* TODO: add :has([tuiInputSlider]) */
|
|
54
|
-
tui-textfield + & {
|
|
55
|
-
--t-offset: calc(var(--tui-radius-m) / 2 + @thumb / 2);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
/* TODO: add :has([tuiInputSlider]) */
|
|
59
|
-
tui-textfield[data-size='l'] + & {
|
|
60
|
-
--t-offset: calc(var(--tui-radius-l) / 2 + @thumb / 2);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
53
|
tui-input-range:not([new]) + &, /* TODO(v5): delete */
|
|
64
54
|
tui-range + & {
|
|
65
55
|
--t-offset: @thumb;
|
|
66
56
|
}
|
|
67
57
|
|
|
58
|
+
/* TODO: add :has([tuiInputSlider]) */
|
|
59
|
+
tui-textfield + & {
|
|
60
|
+
--t-offset: calc(@track-inset[@@input-size] + @thumb / 2);
|
|
61
|
+
}
|
|
62
|
+
|
|
68
63
|
tui-input-range[new] + & {
|
|
69
64
|
--t-offset: calc(@track-inset[@@input-size] + @thumb);
|
|
70
65
|
}
|