@taiga-ui/cdk 2.49.1 → 2.50.1

package/schematics/ng-update/steps/migrate-templates.js

@@ -6,24 +6,40 @@ const elements_1 = require("../../utils/templates/elements");
 const devkit_file_system_1 = require("ng-morph/project/classes/devkit-file-system");
 const ng_component_input_manipulations_1 = require("../../utils/templates/ng-component-input-manipulations");
 const template_resource_1 = require("../../utils/templates/template-resource");
+const ng_morph_1 = require("ng-morph");
 const START_TAG_OFFSET = 1;
 const END_TAG_OFFSET = 2;
 function migrateTemplates(tree) {
-    const templateResources = get_component_templates_1.getComponentTemplates('**/**');
     const fileSystem = new devkit_file_system_1.DevkitFileSystem(tree);
-    templateResources.forEach((resource) => {
-        const path = fileSystem.resolve(template_resource_1.getPathFromTemplateResource(resource));
-        const template = template_resource_1.getTemplateFromTemplateResource(resource, fileSystem);
-        const recorder = fileSystem.edit(path);
-        const offset = template_resource_1.getTemplateOffset(resource);
-        replaceTags(template, recorder, offset);
-        replaceAttrs(template, recorder, offset);
-        replaceAttrsByDirective(fileSystem, resource);
-        fileSystem.commitEdits();
+    const componentWithTemplatesPaths = get_component_templates_1.getComponentTemplates('**/**').map(({ componentPath }) => componentPath);
+    const actions = [
+        replaceTags,
+        replaceAttrs,
+        replaceAttrsByDirective,
+        replaceBreadcrumbs,
+    ];
+    actions.forEach(action => {
+        componentWithTemplatesPaths.forEach(componentPath => {
+            // get updated version of template after the previous action
+            const [resource] = get_component_templates_1.getComponentTemplates(componentPath);
+            const path = fileSystem.resolve(template_resource_1.getPathFromTemplateResource(resource));
+            const recorder = fileSystem.edit(path);
+            action({ resource, fileSystem, recorder });
+        });
+        save(fileSystem);
     });
 }
 exports.migrateTemplates = migrateTemplates;
-function replaceAttrsByDirective(fileSystem, templateResource) {
+/**
+ * We should update virtual file tree
+ * otherwise all following ng-morph commands will overwrite all previous template manipulations
+ * */
+function save(fileSystem) {
+    fileSystem.commitEdits();
+    ng_morph_1.saveActiveProject();
+    ng_morph_1.setActiveProject(ng_morph_1.createProject(fileSystem.tree, '/', '**/**'));
+}
+function replaceAttrsByDirective({ resource, fileSystem, }) {
     templates_1.ATTR_TO_DIRECTIVE.forEach(({ componentSelector, directiveModule, directive, inputProperty }) => {
         ng_component_input_manipulations_1.replaceInputPropertyByDirective({
             componentSelector,
@@ -31,11 +47,13 @@ function replaceAttrsByDirective(fileSystem, templateResource) {
             directive,
             inputProperty,
             fileSystem,
-            templateResource,
+            templateResource: resource,
         });
     });
 }
-function replaceAttrs(template, recorder, templateOffset = 0) {
+function replaceAttrs({ resource, recorder, fileSystem, }) {
+    const template = template_resource_1.getTemplateFromTemplateResource(resource, fileSystem);
+    const templateOffset = template_resource_1.getTemplateOffset(resource);
     templates_1.ATTRS_TO_REPLACE.forEach(({ from, to }) => {
         const offsets = [
             ...elements_1.findAttributeOnElementWithTag(template, from.attrName, from.withTagNames || []),
@@ -47,7 +65,9 @@ function replaceAttrs(template, recorder, templateOffset = 0) {
         });
     });
 }
-function replaceTags(template, recorder, templateOffset = 0) {
+function replaceTags({ resource, recorder, fileSystem, }) {
+    const template = template_resource_1.getTemplateFromTemplateResource(resource, fileSystem);
+    const templateOffset = template_resource_1.getTemplateOffset(resource);
     templates_1.TAGS_TO_REPLACE.forEach(({ from, to, addAttributes }) => {
         const elements = elements_1.findElementsByTagName(template, from);
         elements.forEach(({ sourceCodeLocation }) => {
@@ -65,3 +85,29 @@ function replaceTags(template, recorder, templateOffset = 0) {
         });
     });
 }
+function replaceBreadcrumbs({ resource, recorder, fileSystem, }) {
+    const template = template_resource_1.getTemplateFromTemplateResource(resource, fileSystem);
+    const templateOffset = template_resource_1.getTemplateOffset(resource);
+    const elements = elements_1.findElementsByTagName(template, 'tui-breadcrumbs');
+    elements.forEach(element => {
+        var _a, _b, _c;
+        const itemsAttr = element.attrs.find(attr => attr.name === '[items]');
+        const itemsValue = itemsAttr === null || itemsAttr === void 0 ? void 0 : itemsAttr.value;
+        const insertTo = (_a = element === null || element === void 0 ? void 0 : element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.startTag.endOffset;
+        if (!itemsValue || !insertTo) {
+            return;
+        }
+        recorder.insertRight(insertTo + templateOffset, `
+    <ng-container *ngFor="let item of ${itemsValue}">
+        <a
+            *tuiBreadcrumb
+            tuiLink
+            [routerLink]="item.routerLink"
+        >
+            {{ item.caption }}
+        </a>
+    </ng-container>`);
+        const { startOffset = 0, endOffset = 0 } = ((_c = (_b = element.sourceCodeLocation) === null || _b === void 0 ? void 0 : _b.attrs) === null || _c === void 0 ? void 0 : _c['[items]']) || {};
+        recorder.remove(templateOffset + startOffset - 1, endOffset - startOffset + 1);
+    });
+}

package/schematics/ng-update/steps/miscellaneous.d.ts

@@ -0,0 +1 @@
+export declare function miscellaneousMigrations(): void;

package/schematics/ng-update/steps/miscellaneous.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const get_named_import_references_1 = require("../../utils/get-named-import-references");
+const ng_morph_1 = require("ng-morph");
+function miscellaneousMigrations() {
+    replaceEnumProperty({
+        enumName: 'TuiCurrency',
+        from: 'HongKong_dollar',
+        to: 'HongKongDollar',
+    });
+    replaceEnumProperty({
+        enumName: 'TuiCurrencyCode',
+        from: 'HongKong_dollar',
+        to: 'HongKongDollar',
+    });
+    addWarningToMethod('TuiDirectiveStylesService', 'addStyle', 'addStyle method has been removed. Use components approach');
+}
+exports.miscellaneousMigrations = miscellaneousMigrations;
+function addWarningToMethod(className, method, message) {
+    const references = get_named_import_references_1.getNamedImportReferences(className);
+    references.forEach(ref => {
+        const parent = ref.getParent();
+        if (ng_morph_1.Node.isTypeReferenceNode(parent)) {
+            checkMethod(parent, method, message);
+        }
+    });
+}
+function replaceEnumProperty({ enumName, from, to, }) {
+    const references = get_named_import_references_1.getNamedImportReferences(enumName);
+    references.forEach(ref => {
+        const parent = ref.getParent();
+        if (!ng_morph_1.Node.isPropertyAccessExpression(parent)) {
+            return;
+        }
+        parent.getChildren().forEach(node => {
+            if (node.getText() === from) {
+                node.replaceWithText(to);
+            }
+        });
+    });
+}
+function checkMethod(node, method, message) {
+    const statement = node.getParent();
+    const identifier = statement.getChildrenOfKind(ng_morph_1.SyntaxKind.Identifier)[0];
+    identifier.findReferencesAsNodes().forEach(ref => {
+        let parent = ref.getParent();
+        if ((ng_morph_1.Node.isPropertyAccessExpression(parent) &&
+            parent.getText().startsWith('this.')) ||
+            ng_morph_1.Node.isCallExpression(parent)) {
+            parent = parent.getParentIfKind(ng_morph_1.SyntaxKind.PropertyAccessExpression);
+        }
+        if (ng_morph_1.Node.isPropertyAccessExpression(parent)) {
+            parent.getChildrenOfKind(ng_morph_1.SyntaxKind.Identifier).forEach(identifier => {
+                if (identifier.getText() === method) {
+                    insertTodo(identifier, message);
+                }
+            });
+        }
+    });
+}
+function insertTodo(identifier, message) {
+    const startLinePos = identifier.getStartLinePos();
+    const sourceFile = identifier.getSourceFile();
+    sourceFile.insertText(startLinePos, `// TODO: ${message}\n`);
+}

package/schematics/ng-update/steps/replace-functions.d.ts

@@ -0,0 +1 @@
+export declare function replaceFunctions(): void;

package/schematics/ng-update/steps/replace-functions.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const get_named_import_references_1 = require("../../utils/get-named-import-references");
+const ng_morph_1 = require("ng-morph");
+const import_manipulations_1 = require("../../utils/import-manipulations");
+function replaceFunctions() {
+    replacePadStart(get_named_import_references_1.getNamedImportReferences('padStart', '@taiga-ui/cdk'));
+    replaceFallbackValue(get_named_import_references_1.getNamedImportReferences('fallbackValue', '@taiga-ui/cdk'));
+    replaceCustomEvent(get_named_import_references_1.getNamedImportReferences('tuiCustomEvent', '@taiga-ui/cdk'));
+    replaceClosestElement(get_named_import_references_1.getNamedImportReferences('getClosestElement', '@taiga-ui/cdk'));
+}
+exports.replaceFunctions = replaceFunctions;
+function replacePadStart(references) {
+    references.forEach(ref => {
+        var _a;
+        const parent = ref.getParent();
+        if (ng_morph_1.Node.isImportSpecifier(parent)) {
+            import_manipulations_1.removeImport(parent);
+        }
+        else if (ng_morph_1.Node.isCallExpression(parent)) {
+            const [targetString, length, pad] = parent.getArguments();
+            parent.replaceWithText(`${targetString.getText()}.padStart(${length.getText()}, ${(_a = pad === null || pad === void 0 ? void 0 : pad.getText()) !== null && _a !== void 0 ? _a : '" "'})`);
+        }
+    });
+}
+function replaceClosestElement(references) {
+    references.forEach(ref => {
+        const parent = ref.getParent();
+        if (ng_morph_1.Node.isImportSpecifier(parent)) {
+            import_manipulations_1.removeImport(parent);
+        }
+        else if (ng_morph_1.Node.isCallExpression(parent)) {
+            const [firstArg, secondArg] = parent.getArguments();
+            parent.replaceWithText(`${firstArg.getText()}.closest(${secondArg.getText()})`);
+        }
+    });
+}
+function replaceCustomEvent(references) {
+    references.forEach(ref => {
+        const parent = ref.getParent();
+        if (ng_morph_1.Node.isImportSpecifier(parent)) {
+            import_manipulations_1.removeImport(parent);
+        }
+        else if (ng_morph_1.Node.isCallExpression(parent)) {
+            const [firstArg, secondArg] = parent.getArguments();
+            parent.replaceWithText(`new CustomEvent(${firstArg.getText()}, ${secondArg.getText()})`);
+        }
+    });
+}
+function replaceFallbackValue(references) {
+    references.forEach(ref => {
+        const parent = ref.getParent();
+        if (ng_morph_1.Node.isImportSpecifier(parent)) {
+            import_manipulations_1.removeImport(parent);
+        }
+        else if (ng_morph_1.Node.isCallExpression(parent)) {
+            const [firstArg, secondArg] = parent.getArguments();
+            parent.replaceWithText(`${firstArg.getText()} ?? ${secondArg.getText()}`);
+        }
+    });
+}

package/schematics/utils/get-project.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 function getProject(options, workspace) {
-    const projectName = options.project || workspace.extensions.defaultProject.toString();
+    var _a;
+    const projectName = options.project || ((_a = workspace.extensions.defaultProject) === null || _a === void 0 ? void 0 : _a.toString()) || '';
     const project = workspace.projects.get(projectName);
     if (!project) {
         throw new schematics_1.SchematicsException(`Unable to find project '${projectName}' in the workspace`);

package/schematics/utils/templates/elements.d.ts

@@ -9,11 +9,13 @@ export declare function findElementsWithAttribute(html: string, attributeName: s
  * Finds elements with explicit tag names that also contain the specified attribute. Returns the
  * attribute start offset based on the specified HTML.
  */
-export declare function findAttributeOnElementWithTag(html: string, name: string, tagNames: string[]): number[];
+export declare function findAttributeOnElementWithTag(html: string, name: string, tagNames: string[], filterFn?: (element: Element) => boolean): number[];
 /**
  * Finds elements that contain the given attribute and contain at least one of the other
  * specified attributes. Returns the primary attribute's start offset based on the specified HTML.
  */
-export declare function findAttributeOnElementWithAttrs(html: string, name: string, attrs: string[]): number[];
+export declare function findAttributeOnElementWithAttrs(html: string, name: string, attrs: string[], filterFn?: (element: Element) => boolean): number[];
+/** Shorthand function that checks if the specified element contains the given attribute. */
+export declare function hasElementAttribute(element: Element, attributeName: string): boolean;
 /** Gets the start offset of the given attribute from a Parse5 element. */
 export declare function getStartOffsetOfAttribute(element: Element, attributeName: string): number;

package/schematics/utils/templates/elements.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const parse5_1 = require("parse5");
+const ALWAYS_TRUE_HANDLER = () => true;
 function findElementsByTagName(html, tagName) {
     const document = parse5_1.parseFragment(html, { sourceCodeLocationInfo: true });
     const elements = [];
@@ -46,9 +47,9 @@ exports.findElementsWithAttribute = findElementsWithAttribute;
  * Finds elements with explicit tag names that also contain the specified attribute. Returns the
  * attribute start offset based on the specified HTML.
  */
-function findAttributeOnElementWithTag(html, name, tagNames) {
+function findAttributeOnElementWithTag(html, name, tagNames, filterFn = ALWAYS_TRUE_HANDLER) {
     return findElementsWithAttribute(html, name)
-        .filter(element => tagNames.includes(element.tagName))
+        .filter(element => tagNames.includes(element.tagName) && filterFn(element))
         .map(element => getStartOffsetOfAttribute(element, name));
 }
 exports.findAttributeOnElementWithTag = findAttributeOnElementWithTag;
@@ -56,9 +57,10 @@ exports.findAttributeOnElementWithTag = findAttributeOnElementWithTag;
  * Finds elements that contain the given attribute and contain at least one of the other
  * specified attributes. Returns the primary attribute's start offset based on the specified HTML.
  */
-function findAttributeOnElementWithAttrs(html, name, attrs) {
+function findAttributeOnElementWithAttrs(html, name, attrs, filterFn = ALWAYS_TRUE_HANDLER) {
     return findElementsWithAttribute(html, name)
-        .filter(element => attrs.some(attr => hasElementAttribute(element, attr)))
+        .filter(element => attrs.some(attr => hasElementAttribute(element, attr)) &&
+        filterFn(element))
         .map(element => getStartOffsetOfAttribute(element, name));
 }
 exports.findAttributeOnElementWithAttrs = findAttributeOnElementWithAttrs;
@@ -67,6 +69,7 @@ function hasElementAttribute(element, attributeName) {
     return (element.attrs &&
         element.attrs.some(attr => attr.name === attributeName.toLowerCase()));
 }
+exports.hasElementAttribute = hasElementAttribute;
 /** Gets the start offset of the given attribute from a Parse5 element. */
 function getStartOffsetOfAttribute(element, attributeName) {
     var _a, _b;

package/schematics/utils/templates/ng-component-input-manipulations.d.ts

@@ -1,4 +1,5 @@
 import { DevkitFileSystem } from 'ng-morph/project/classes/devkit-file-system';
+import { Element } from 'parse5';
 import { TemplateResource } from '../../ng-update/interfaces/template-resourse';
 /**
  * Replace component input property by new value
@@ -25,13 +26,31 @@ import { TemplateResource } from '../../ng-update/interfaces/template-resourse';
  * ___
  * @return true if something was changed
  */
-export declare function replaceInputProperty({ templateResource, fileSystem, componentSelector, from, to, }: {
+export declare function replaceInputProperty({ templateResource, fileSystem, componentSelector, from, to, newValue, filterFn, }: {
     templateResource: TemplateResource;
     fileSystem: DevkitFileSystem;
     componentSelector: string | string[];
     from: string;
     to: string;
+    newValue?: string;
+    filterFn?: (element: Element) => boolean;
 }): boolean;
+/**
+ * @example
+ * // 10 symbols before property `size` and string `size="s"` has 8-symbols length
+ * const template = '<tui-card size="s"></tui-card>';
+ *
+ * getInputPropertyOffsets(template, 'size', ['tui-card']) // [[10, 18]]
+ */
+export declare function getInputPropertyOffsets(html: string, attrName: string, tags: string[], filterFn?: (element: Element) => boolean): [number, number][];
+/**
+ * @example
+ * // `<tui-card size="` has 16-symbols length
+ * const template = '<tui-card size="xl"></tui-card>';
+ *
+ * getInputPropertyValueOffsets(template, 'size', ['tui-card']) // [ [16, 18] ]
+ */
+export declare function getInputPropertyValueOffsets(template: string, attrName: string, tags: string[]): [number, number][];
 export declare function replaceInputPropertyByDirective({ templateResource, fileSystem, componentSelector, inputProperty, directive, directiveModule, }: {
     templateResource: TemplateResource;
     fileSystem: DevkitFileSystem;
@@ -43,3 +62,15 @@ export declare function replaceInputPropertyByDirective({ templateResource, file
         moduleSpecifier: string;
     };
 }): void;
+/**
+ * After removing property from the tag (which uses multi lines inside template) it can leave redundant space.
+ * It is not critical because html is valid even with this extra space.
+ * TODO: Find a way to fix it
+ */
+export declare function removeInputProperty({ templateResource, fileSystem, componentSelector, inputProperty, filterFn, }: {
+    templateResource: TemplateResource;
+    fileSystem: DevkitFileSystem;
+    componentSelector: string;
+    inputProperty: string;
+    filterFn?: (element: Element) => boolean;
+}): void;

package/schematics/utils/templates/ng-component-input-manipulations.js

@@ -31,7 +31,7 @@ const elements_1 = require("./elements");
  * ___
  * @return true if something was changed
  */
-function replaceInputProperty({ templateResource, fileSystem, componentSelector, from, to, }) {
+function replaceInputProperty({ templateResource, fileSystem, componentSelector, from, to, newValue = '', filterFn, }) {
     const template = template_resource_1.getTemplateFromTemplateResource(templateResource, fileSystem);
     const path = fileSystem.resolve(template_resource_1.getPathFromTemplateResource(templateResource));
     const recorder = fileSystem.edit(path);
@@ -40,27 +40,67 @@ function replaceInputProperty({ templateResource, fileSystem, componentSelector,
         ? componentSelector
         : [componentSelector];
     const stringProperties = [
-        ...elements_1.findAttributeOnElementWithTag(template, from, selector),
-        ...elements_1.findAttributeOnElementWithAttrs(template, from, selector),
-    ];
+        ...elements_1.findAttributeOnElementWithTag(template, from, selector, filterFn),
+        ...elements_1.findAttributeOnElementWithAttrs(template, from, selector, filterFn),
+    ].map(offset => templateOffset + offset);
     const propertyBindings = [
-        ...elements_1.findAttributeOnElementWithTag(template, `[${from}]`, selector),
-        ...elements_1.findAttributeOnElementWithAttrs(template, `[${from}]`, selector),
-    ];
+        ...elements_1.findAttributeOnElementWithTag(template, `[${from}]`, selector, filterFn),
+        ...elements_1.findAttributeOnElementWithAttrs(template, `[${from}]`, selector, filterFn),
+    ].map(offset => templateOffset + offset);
+    const propertyValues = newValue
+        ? getInputPropertyValueOffsets(template, from, selector).map(([start, end]) => [
+            templateOffset + start,
+            templateOffset + end,
+        ])
+        : [];
     if (!stringProperties.length && !propertyBindings.length) {
         return false;
     }
     stringProperties.forEach(offset => {
-        recorder.remove(offset + templateOffset, from.length);
-        recorder.insertRight(offset + templateOffset, to);
+        recorder.remove(offset, from.length);
+        recorder.insertRight(offset, to);
     });
     propertyBindings.forEach(offset => {
-        recorder.remove(offset + templateOffset, `[${from}]`.length);
-        recorder.insertRight(offset + templateOffset, `[${to}]`);
+        recorder.remove(offset, `[${from}]`.length);
+        recorder.insertRight(offset, to.startsWith('[') ? to : `[${to}]`);
+    });
+    propertyValues.forEach(([startOffset, endOffset]) => {
+        recorder.remove(startOffset, endOffset - startOffset);
+        recorder.insertRight(startOffset, newValue);
     });
     return true;
 }
 exports.replaceInputProperty = replaceInputProperty;
+/**
+ * @example
+ * // 10 symbols before property `size` and string `size="s"` has 8-symbols length
+ * const template = '<tui-card size="s"></tui-card>';
+ *
+ * getInputPropertyOffsets(template, 'size', ['tui-card']) // [[10, 18]]
+ */
+function getInputPropertyOffsets(html, attrName, tags, filterFn = () => true) {
+    return elements_1.findElementsWithAttribute(html, attrName)
+        .filter(element => tags.includes(element.tagName) && filterFn(element))
+        .map((element) => {
+        var _a, _b;
+        const { startOffset = 0, endOffset = 0 } = ((_b = (_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[attrName.toLowerCase()]) || {};
+        return [startOffset, endOffset];
+    });
+}
+exports.getInputPropertyOffsets = getInputPropertyOffsets;
+/**
+ * @example
+ * // `<tui-card size="` has 16-symbols length
+ * const template = '<tui-card size="xl"></tui-card>';
+ *
+ * getInputPropertyValueOffsets(template, 'size', ['tui-card']) // [ [16, 18] ]
+ */
+function getInputPropertyValueOffsets(template, attrName, tags) {
+    const stringProperties = getInputPropertyOffsets(template, attrName, tags).map(([start, end]) => [start + attrName.length + '="'.length, end - 1]);
+    const propertyBindings = getInputPropertyOffsets(template, `[${attrName}]`, tags).map(([start, end]) => [start + `[${attrName}]`.length + '="'.length, end - 1]);
+    return [...stringProperties, ...propertyBindings];
+}
+exports.getInputPropertyValueOffsets = getInputPropertyValueOffsets;
 function replaceInputPropertyByDirective({ templateResource, fileSystem, componentSelector, inputProperty, directive, directiveModule, }) {
     const wasModified = replaceInputProperty({
         templateResource,
@@ -81,3 +121,22 @@ function replaceInputPropertyByDirective({ templateResource, fileSystem, compone
     }
 }
 exports.replaceInputPropertyByDirective = replaceInputPropertyByDirective;
+/**
+ * After removing property from the tag (which uses multi lines inside template) it can leave redundant space.
+ * It is not critical because html is valid even with this extra space.
+ * TODO: Find a way to fix it
+ */
+function removeInputProperty({ templateResource, fileSystem, componentSelector, inputProperty, filterFn, }) {
+    const template = template_resource_1.getTemplateFromTemplateResource(templateResource, fileSystem);
+    const templateOffset = template_resource_1.getTemplateOffset(templateResource);
+    const path = fileSystem.resolve(template_resource_1.getPathFromTemplateResource(templateResource));
+    const recorder = fileSystem.edit(path);
+    const propertyOffsets = [
+        ...getInputPropertyOffsets(template, inputProperty, [componentSelector], filterFn),
+        ...getInputPropertyOffsets(template, `[${inputProperty}]`, [componentSelector], filterFn),
+    ].map(([start, end]) => [templateOffset + start, templateOffset + end]);
+    propertyOffsets.forEach(([start, end]) => {
+        recorder.remove(start, end - start);
+    });
+}
+exports.removeInputProperty = removeInputProperty;

package/services/directive-styles.service.d.ts

@@ -11,6 +11,8 @@ export declare class TuiDirectiveStylesService {
     private readonly map;
     constructor(resolver: ComponentFactoryResolver, injector: Injector, documentRef: Document, renderer: Renderer2);
     addComponent(component: Type<unknown>): void;
-    /** @deprecated use components approach */
+    /** @deprecated use components approach
+     * TODO: delete in v3.0
+     */
     addStyle(styles: string, attribute: string): void;
 }

package/tokens/taiga-ui-cdk-tokens.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"TUI_ACTIVE_ELEMENT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":22,"character":38},"arguments":["Active element on the document for ActiveZone",{"__symbolic":"error","message":"Lambda not supported","line":25,"character":17,"module":"./active-element"}]},"TUI_ALERTS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":30},"arguments":["A stream of alerts",{"__symbolic":"error","message":"Lambda not supported","line":7,"character":13,"module":"./alerts"}]},"TUI_DEFAULT_RENDERER":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":40},"arguments":["A Renderer2 for global services",{"__symbolic":"error","message":"Lambda not supported","line":7,"character":17,"module":"./default-renderer"}]},"TUI_DIALOGS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":31},"arguments":["A stream of dialogs",{"__symbolic":"error","message":"Lambda not supported","line":7,"character":13,"module":"./dialogs"}]},"TUI_FOCUSABLE_ITEM_ACCESSOR":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":8},"arguments":["A component that can be focused"]},"TUI_IS_ANDROID":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":5,"character":34},"arguments":["Mobile browser that is not iOS (technically includes Windows Phone, Blackberry etc.)",{"__symbolic":"error","message":"Lambda not supported","line":8,"character":17,"module":"./is-android"}]},"TUI_IS_APPLE":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":32},"arguments":["Apple(safari/webkit) detection",{"__symbolic":"error","message":"Lambda not supported","line":6,"character":14,"module":"./is-apple"}]},"TUI_IS_CHROMIUM":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":35},"arguments":["Chromium browser engine detection",{"__symbolic":"error","message":"Lambda not supported","line":6,"character":17,"module":"./is-chromium"}]},"WindowWithCypress":{"__symbolic":"interface"},"TUI_IS_CYPRESS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":10,"character":34},"arguments":["Detect if app is running under Cypress",{"__symbolic":"error","message":"Lambda not supported","line":13,"character":17,"module":"./is-cypress"}]},"TUI_IS_FIREFOX":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":34},"arguments":["Firefox browser engine detection",{"__symbolic":"error","message":"Lambda not supported","line":6,"character":17,"module":"./is-firefox"}]},"TUI_IS_IOS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":30},"arguments":["iOS browser detection",{"__symbolic":"error","message":"Lambda not supported","line":5,"character":13,"module":"./is-ios"}]},"TUI_IS_MOBILE":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":9,"character":33},"arguments":["Mobile browser detection",{"__symbolic":"error","message":"Lambda not supported","line":10,"character":13,"module":"./is-mobile"}]},"TUI_IS_WEBKIT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":33},"arguments":["Webkit browser engine detection",{"__symbolic":"error","message":"Lambda not supported","line":6,"character":17,"module":"./is-webkit"}]},"TUI_REMOVED_ELEMENT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":5,"character":39},"arguments":["Element currently being removed by AnimationEngine",{"__symbolic":"error","message":"Lambda not supported","line":8,"character":17,"module":"./removed-element"}]},"TUI_SANITIZER":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":33},"arguments":["A custom Sanitizer to sanitize source before inlining"]},"TUI_SWIPE_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":37},"arguments":["Swipe options",{"__symbolic":"error","message":"Lambda not supported","line":4,"character":13,"module":"./swipe-options"}]},"TUI_TAKE_ONLY_TRUSTED_EVENTS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":9,"character":8},"arguments":["This token need for override behavior the `pressedObservable` function",{"__symbolic":"error","message":"Lambda not supported","line":12,"character":21,"module":"./take-only-trusted-events"}]},"TUI_TOUCH_SUPPORTED":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":39},"arguments":["Touch support detection",{"__symbolic":"error","message":"Lambda not supported","line":4,"character":13,"module":"./touch-supported"}]},"TUI_WINDOW_HEIGHT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":6,"character":37},"arguments":["Window height accounting for disappearing address bar",{"__symbolic":"error","message":"Lambda not supported","line":9,"character":17,"module":"./window-height"}]},"TUI_ZOOM_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":36},"arguments":["Zoom options",{"__symbolic":"error","message":"Lambda not supported","line":4,"character":13,"module":"./zoom-options"}]}},"origins":{"TUI_ACTIVE_ELEMENT":"./active-element","TUI_ALERTS":"./alerts","TUI_DEFAULT_RENDERER":"./default-renderer","TUI_DIALOGS":"./dialogs","TUI_FOCUSABLE_ITEM_ACCESSOR":"./focusable-item-accessor","TUI_IS_ANDROID":"./is-android","TUI_IS_APPLE":"./is-apple","TUI_IS_CHROMIUM":"./is-chromium","WindowWithCypress":"./is-cypress","TUI_IS_CYPRESS":"./is-cypress","TUI_IS_FIREFOX":"./is-firefox","TUI_IS_IOS":"./is-ios","TUI_IS_MOBILE":"./is-mobile","TUI_IS_WEBKIT":"./is-webkit","TUI_REMOVED_ELEMENT":"./removed-element","TUI_SANITIZER":"./sanitizer","TUI_SWIPE_OPTIONS":"./swipe-options","TUI_TAKE_ONLY_TRUSTED_EVENTS":"./take-only-trusted-events","TUI_TOUCH_SUPPORTED":"./touch-supported","TUI_WINDOW_HEIGHT":"./window-height","TUI_ZOOM_OPTIONS":"./zoom-options"},"importAs":"@taiga-ui/cdk/tokens"}
+{"__symbolic":"module","version":4,"metadata":{"TUI_ACTIVE_ELEMENT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":22,"character":38},"arguments":["Active element on the document for ActiveZone",{"__symbolic":"error","message":"Lambda not supported","line":25,"character":17,"module":"./active-element"}]},"TUI_ALERTS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":30},"arguments":["A stream of alerts",{"__symbolic":"error","message":"Lambda not supported","line":7,"character":13,"module":"./alerts"}]},"TUI_DEFAULT_RENDERER":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":40},"arguments":["A Renderer2 for global services",{"__symbolic":"error","message":"Lambda not supported","line":7,"character":17,"module":"./default-renderer"}]},"TUI_DIALOGS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":31},"arguments":["A stream of dialogs",{"__symbolic":"error","message":"Lambda not supported","line":7,"character":13,"module":"./dialogs"}]},"TUI_FOCUSABLE_ITEM_ACCESSOR":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":8},"arguments":["A component that can be focused"]},"TUI_IS_ANDROID":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":5,"character":34},"arguments":["Mobile browser that is not iOS (technically includes Windows Phone, Blackberry etc.)",{"__symbolic":"error","message":"Lambda not supported","line":8,"character":17,"module":"./is-android"}]},"TUI_IS_APPLE":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":32},"arguments":["Apple(safari/webkit) detection",{"__symbolic":"error","message":"Lambda not supported","line":6,"character":14,"module":"./is-apple"}]},"TUI_IS_CHROMIUM":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":35},"arguments":["Chromium browser engine detection",{"__symbolic":"error","message":"Lambda not supported","line":6,"character":17,"module":"./is-chromium"}]},"WindowWithCypress":{"__symbolic":"interface"},"TUI_IS_CYPRESS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":11,"character":34},"arguments":["Detect if app is running under Cypress",{"__symbolic":"error","message":"Lambda not supported","line":14,"character":17,"module":"./is-cypress"}]},"TUI_IS_FIREFOX":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":34},"arguments":["Firefox browser engine detection",{"__symbolic":"error","message":"Lambda not supported","line":6,"character":17,"module":"./is-firefox"}]},"TUI_IS_IOS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":30},"arguments":["iOS browser detection",{"__symbolic":"error","message":"Lambda not supported","line":5,"character":13,"module":"./is-ios"}]},"TUI_IS_MOBILE":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":9,"character":33},"arguments":["Mobile browser detection",{"__symbolic":"error","message":"Lambda not supported","line":10,"character":13,"module":"./is-mobile"}]},"TUI_IS_WEBKIT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":33},"arguments":["Webkit browser engine detection",{"__symbolic":"error","message":"Lambda not supported","line":6,"character":17,"module":"./is-webkit"}]},"TUI_REMOVED_ELEMENT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":5,"character":39},"arguments":["Element currently being removed by AnimationEngine",{"__symbolic":"error","message":"Lambda not supported","line":8,"character":17,"module":"./removed-element"}]},"TUI_SANITIZER":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":33},"arguments":["A custom Sanitizer to sanitize source before inlining"]},"TUI_SWIPE_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":37},"arguments":["Swipe options",{"__symbolic":"error","message":"Lambda not supported","line":4,"character":13,"module":"./swipe-options"}]},"TUI_TAKE_ONLY_TRUSTED_EVENTS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":9,"character":8},"arguments":["This token need for override behavior the `pressedObservable` function",{"__symbolic":"error","message":"Lambda not supported","line":12,"character":21,"module":"./take-only-trusted-events"}]},"TUI_TOUCH_SUPPORTED":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":39},"arguments":["Touch support detection",{"__symbolic":"error","message":"Lambda not supported","line":4,"character":13,"module":"./touch-supported"}]},"TUI_WINDOW_HEIGHT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":6,"character":37},"arguments":["Window height accounting for disappearing address bar",{"__symbolic":"error","message":"Lambda not supported","line":9,"character":17,"module":"./window-height"}]},"TUI_ZOOM_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":36},"arguments":["Zoom options",{"__symbolic":"error","message":"Lambda not supported","line":4,"character":13,"module":"./zoom-options"}]}},"origins":{"TUI_ACTIVE_ELEMENT":"./active-element","TUI_ALERTS":"./alerts","TUI_DEFAULT_RENDERER":"./default-renderer","TUI_DIALOGS":"./dialogs","TUI_FOCUSABLE_ITEM_ACCESSOR":"./focusable-item-accessor","TUI_IS_ANDROID":"./is-android","TUI_IS_APPLE":"./is-apple","TUI_IS_CHROMIUM":"./is-chromium","WindowWithCypress":"./is-cypress","TUI_IS_CYPRESS":"./is-cypress","TUI_IS_FIREFOX":"./is-firefox","TUI_IS_IOS":"./is-ios","TUI_IS_MOBILE":"./is-mobile","TUI_IS_WEBKIT":"./is-webkit","TUI_REMOVED_ELEMENT":"./removed-element","TUI_SANITIZER":"./sanitizer","TUI_SWIPE_OPTIONS":"./swipe-options","TUI_TAKE_ONLY_TRUSTED_EVENTS":"./take-only-trusted-events","TUI_TOUCH_SUPPORTED":"./touch-supported","TUI_WINDOW_HEIGHT":"./window-height","TUI_ZOOM_OPTIONS":"./zoom-options"},"importAs":"@taiga-ui/cdk/tokens"}

package/utils/dom/get-viewport-height.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @description:
+ * Cross-browser @media (height)
+ *
+ * 1. window.innerWidth
+ * 1.1. gets CSS viewport @media (height) which include scrollbars
+ * 1.2. initial-scale and zoom variations may cause mobile values to
+ *      wrongly scale down to what PPK calls the visual
+ *      viewport and be smaller than the @media values
+ *  1.3. zoom may cause values to be 1px off due to native rounding
+ *
+ *  2. document.documentElement.clientHeight
+ *  2.1. equals CSS viewport width minus scrollbar width
+ *  2.2. matches @media (height) when there is no scrollbar
+ *  2.3. available cross-browser
+ *  2.4. inaccurate if doctype is missing
+ */
+export declare function tuiGetViewportHeight({ document, innerHeight }: Window): number;

package/utils/dom/get-viewport-width.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @description:
+ * Cross-browser @media (width)
+ *
+ * 1. window.innerWidth
+ * 1.1. gets CSS viewport @media (width) which include scrollbars
+ * 1.2. initial-scale and zoom variations may cause mobile values to
+ *      wrongly scale down to what PPK calls the visual
+ *      viewport and be smaller than the @media values
+ *  1.3. zoom may cause values to be 1px off due to native rounding
+ *
+ *  2. document.documentElement.clientWidth
+ *  2.1. equals CSS viewport width minus scrollbar width
+ *  2.2. matches @media (width) when there is no scrollbar
+ *  2.3. available cross-browser
+ *  2.4. inaccurate if doctype is missing
+ */
+export declare function tuiGetViewportWidth({ document, innerWidth }: Window): number;

package/utils/dom/index.d.ts

@@ -8,6 +8,8 @@ export * from './get-document-or-shadow-root';
 export * from './get-element-obscurers';
 export * from './get-element-offset';
 export * from './get-scroll-parent';
+export * from './get-viewport-height';
+export * from './get-viewport-width';
 export * from './is-current-target';
 export * from './is-inside-iframe';
 export * from './is-node-in';