feat!: delete tui-palette.less (data-tui-background and `data-tui…

…-color` states) (#2473)

projects/addon-editor/extensions/default-editor-extensions.ts

@@ -19,7 +19,7 @@ export const defaultEditorExtensions = [
     import(`@tiptap/extension-table-row`).then(m => m.default),
     import(`@tiptap/extension-table-cell`).then(m => m.default),
     import(`@tiptap/extension-table-header`).then(m => m.TableHeader),
-    import(`./indent-outdent`).then(m => m.Indent),
+    import(`./indent-outdent`).then(m => m.TuiTabExtension),
     import(`./table-cell-background`).then(m => m.TableCellBackground),
     import(`@taiga-ui/addon-editor/extensions/details`).then(m => m.TuiDetailsContent),
     import(`@taiga-ui/addon-editor/extensions/details`).then(m => m.TuiDetails),

projects/addon-editor/extensions/indent-outdent.ts

@@ -4,8 +4,7 @@ export function tuiIsOrderedOrBulletList(editor: Editor): boolean {
     return editor.isActive(`bulletList`) || editor.isActive(`orderedList`);
 }
 
-// TODO: rename to TuiTabExtension in 3.0
-export const Indent = Extension.create({
+export const TuiTabExtension = Extension.create({
     name: `indent`,
 
     addKeyboardShortcuts(): any {

projects/core/constants/index.ts

@@ -8,4 +8,3 @@ export * from './events';
 export * from './hint-directions';
 export * from './mask-caret-trap';
 export * from './regexp';
-export * from './version';

projects/demo/src/modules/app/stackblitz/stackblitz-resources-loader.ts

@@ -59,7 +59,6 @@ export abstract class AbstractTuiStackblitzResourcesLoader {
             tuiIslandLess,
             tuiListLess,
             tuiMobileOnlyLess,
-            tuiPaletteLess,
             tuiRequiredLess,
             tuiRowLess,
             tuiSkeletonLess,
@@ -98,7 +97,6 @@ export abstract class AbstractTuiStackblitzResourcesLoader {
             tuiRawLoad(import(`../../../../../styles/markup/tui-island.less?raw`)),
             tuiRawLoad(import(`../../../../../styles/markup/tui-list.less?raw`)),
             tuiRawLoad(import(`../../../../../styles/markup/tui-mobile-only.less?raw`)),
-            tuiRawLoad(import(`../../../../../styles/markup/tui-palette.less?raw`)),
             tuiRawLoad(import(`../../../../../styles/markup/tui-required.less?raw`)),
             tuiRawLoad(import(`../../../../../styles/markup/tui-row.less?raw`)),
             tuiRawLoad(import(`../../../../../styles/markup/tui-skeleton.less?raw`)),
@@ -178,7 +176,6 @@ export abstract class AbstractTuiStackblitzResourcesLoader {
         styles[`styles/markup/tui-island.less`] = tuiIslandLess;
         styles[`styles/markup/tui-list.less`] = tuiListLess;
         styles[`styles/markup/tui-mobile-only.less`] = tuiMobileOnlyLess;
-        styles[`styles/markup/tui-palette.less`] = tuiPaletteLess;
         styles[`styles/markup/tui-required.less`] = tuiRequiredLess;
         styles[`styles/markup/tui-row.less`] = tuiRowLess;
         styles[`styles/markup/tui-skeleton.less`] = tuiSkeletonLess;

projects/demo/src/modules/components/editor/editor.component.ts

@@ -101,6 +101,14 @@ export class ExampleEditorComponent extends AbstractExampleTuiControl {
         LESS: import(`./examples/6/index.less?raw`),
     };
 
+    readonly example7: TuiDocExample = {
+        TypeScript: import(`./examples/7/index.ts?raw`),
+        HTML: import(`./examples/7/index.html?raw`),
+        LESS: import(`./examples/7/index.less?raw`),
+        './image-loader.ts': import(`./examples/7/image-loader?raw`),
+        './imgbb.service.ts': import(`./examples/7/imgbb.service?raw`),
+    };
+
     readonly control = new FormControl();
 
     readonly toolsVariants: readonly TuiEditorTool[][] = [

projects/demo/src/modules/components/editor/editor.module.ts

@@ -21,6 +21,7 @@ import {ImagePreviewExampleModule} from './examples/3/image-preview/image-previe
 import {TuiEditorExample4} from './examples/4';
 import {TuiEditorExample5} from './examples/5';
 import {TuiEditorExample6} from './examples/6';
+import {TuiEditorExample7} from './examples/7';
 
 @NgModule({
     imports: [
@@ -47,6 +48,7 @@ import {TuiEditorExample6} from './examples/6';
         TuiEditorExample4,
         TuiEditorExample6,
         TuiEditorExample5,
+        TuiEditorExample7,
     ],
     exports: [ExampleEditorComponent],
 })

projects/demo/src/modules/components/editor/editor.template.html

@@ -112,6 +112,15 @@
         >
             <tui-editor-example-6></tui-editor-example-6>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="upload-images"
+            i18n-heading
+            heading="Uploading images to hosting"
+            [content]="example7"
+        >
+            <tui-editor-example-7></tui-editor-example-7>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/components/editor/examples/7/image-loader.ts

@@ -0,0 +1,16 @@
+import {fromEvent, Observable} from 'rxjs';
+import {map, switchMap} from 'rxjs/operators';
+
+import {ImgbbService} from './imgbb.service';
+
+export function imageLoader(service: ImgbbService): (file: File) => Observable<string> {
+    return (file: File) => {
+        const fileReader = new FileReader();
+
+        fileReader.readAsDataURL(file);
+
+        return fromEvent(fileReader, `load`)
+            .pipe(map(() => String(fileReader.result)))
+            .pipe(switchMap(base64 => service.save(base64)));
+    };
+}

projects/demo/src/modules/components/editor/examples/7/imgbb.service.ts

@@ -0,0 +1,45 @@
+import {Injectable} from '@angular/core';
+import {from, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+import {environment} from '../../../../../environments/environment';
+
+interface ImgbbResponse {
+    data: {
+        id: string;
+        title: string;
+        url: string;
+        width: string;
+        height: string;
+        size: number;
+        time: string;
+        expiration: string;
+    };
+    success: boolean;
+    status: number;
+}
+
+@Injectable({
+    providedIn: `root`,
+})
+export class ImgbbService {
+    private static createBody(base64: string): URLSearchParams {
+        const formData = new FormData();
+
+        formData.append(`image`, base64.split(`,`).pop() || ``);
+
+        return new URLSearchParams(formData as any);
+    }
+
+    save(base64: string): Observable<string> {
+        const {host, apiKey, expiration} = environment.imgbb;
+
+        return from(
+            fetch(`${host}/1/upload?key=${apiKey}&expiration=${expiration}`, {
+                method: `POST`,
+                body: ImgbbService.createBody(base64),
+                headers: {'Content-Type': `application/x-www-form-urlencoded`},
+            }).then(async (response: Response) => response.json()),
+        ).pipe(map((response: ImgbbResponse) => response.data.url));
+    }
+}

projects/demo/src/modules/components/editor/examples/7/index.html

@@ -0,0 +1,11 @@
+<tui-editor
+    class="editor"
+    [formControl]="control"
+    [tools]="builtInTools"
+></tui-editor>
+
+<h4>HTML:</h4>
+<tui-editor-socket [content]="control.value"></tui-editor-socket>
+
+<h4>Text:</h4>
+<p>{{ control.value }}</p>

projects/demo/src/modules/components/editor/examples/7/index.less

@@ -0,0 +1,3 @@
+.editor {
+    min-height: 30rem;
+}

projects/demo/src/modules/components/editor/examples/7/index.ts

@@ -0,0 +1,63 @@
+import {Component, Injector} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TUI_EDITOR_EXTENSIONS,
+    TUI_EDITOR_MAX_IMAGE_WIDTH,
+    TUI_EDITOR_MIN_IMAGE_WIDTH,
+    TUI_IMAGE_LOADER,
+    TuiEditorTool,
+} from '@taiga-ui/addon-editor';
+import {TuiDestroyService} from '@taiga-ui/cdk';
+
+import {imageLoader} from './image-loader';
+import {ImgbbService} from './imgbb.service';
+
+@Component({
+    selector: `tui-editor-example-7`,
+    templateUrl: `./index.html`,
+    styleUrls: [`./index.less`],
+    providers: [
+        TuiDestroyService,
+        {
+            provide: TUI_EDITOR_EXTENSIONS,
+            deps: [Injector],
+            useFactory: (injector: Injector) => [
+                import(`@taiga-ui/addon-editor/extensions/starter-kit`).then(
+                    ({StarterKit}) => StarterKit,
+                ),
+                import(`@taiga-ui/addon-editor/extensions/image-editor`).then(
+                    ({createImageEditorExtension}) =>
+                        createImageEditorExtension(injector),
+                ),
+            ],
+        },
+        {
+            provide: TUI_EDITOR_MIN_IMAGE_WIDTH,
+            useValue: 150,
+        },
+        {
+            provide: TUI_EDITOR_MAX_IMAGE_WIDTH,
+            useValue: 400,
+        },
+        {
+            provide: TUI_IMAGE_LOADER,
+            useFactory: imageLoader,
+            deps: [ImgbbService],
+        },
+    ],
+    changeDetection,
+    encapsulation,
+})
+export class TuiEditorExample7 {
+    readonly builtInTools = [TuiEditorTool.Undo, TuiEditorTool.Img];
+
+    control = new FormControl(``);
+
+    constructor() {
+        this.control.patchValue(
+            `<img data-type="image-editor" src="/assets/images/lumberjack.png" width="300"><p>Try to drag right border of image!</p><p>To change min size of image use token <code>TUI_EDITOR_MIN_IMAGE_WIDTH</code>.</p><p>To change max size of image use token <code>TUI_EDITOR_MAX_IMAGE_WIDTH</code>.</p>`,
+        );
+    }
+}

projects/demo/src/modules/components/push/push.module.ts

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiButtonModule, TuiLinkModule, TuiSvgModule} from '@taiga-ui/core';
 import {TuiPushModule} from '@taiga-ui/kit';
 
@@ -18,7 +18,7 @@ import {ExampleTuiPushComponent} from './push.component';
         TuiLinkModule,
         TuiSvgModule,
         TuiAddonDocModule,
-        RouterModule.forChild(generateRoutes(ExampleTuiPushComponent)),
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPushComponent)),
     ],
     declarations: [
         ExampleTuiPushComponent,

projects/kit/components/badged-content/badged-content.style.less

@@ -8,10 +8,7 @@
     position: absolute;
     border-radius: 100%;
     box-shadow: 0 0 0 2px currentColor;
-
-    &:not([data-tui-background]) {
-        background-color: currentColor;
-    }
+    background-color: currentColor;
 
     &_top {
         :host[data-size='xs']:not(._rounded) &,
@@ -124,42 +121,6 @@
     }
 }
 
-.t-icon,
-.t-notification {
-    &[data-tui-color='normal'] {
-        color: var(--tui-base-06);
-    }
-
-    &[data-tui-color='onDark'] {
-        color: var(--tui-secondary);
-    }
-
-    &[data-tui-color='gray'] {
-        color: var(--tui-base-03);
-    }
-
-    &[data-tui-color='warning'] {
-        color: var(--tui-primary);
-    }
-
-    &[data-tui-color='secondary'] {
-        color: var(--tui-info-fill);
-    }
-
-    &[data-tui-color='highlight'],
-    &[data-tui-color='white'] {
-        color: var(--tui-base-01);
-    }
-
-    &[data-tui-color='transparent-dark'] {
-        color: var(--tui-clear);
-    }
-
-    &[data-tui-color='transparent-light'] {
-        color: var(--tui-clear-inverse);
-    }
-}
-
 .t-icon {
     color: var(--tui-success-fill);
 

projects/kit/components/input-count/input-count.component.ts

@@ -117,7 +117,6 @@ export class TuiInputCountComponent
         } as TuiTextMaskOptions as unknown as TextMaskConfig;
     }
 
-    // TODO: 3.0 Remove in v.3
     @HostBinding(`class._hide-buttons`)
     get buttonsHidden(): boolean {
         return this.hideButtons || this.appearance === `table`;

projects/kit/components/push/push-alert.template.html

@@ -15,10 +15,9 @@
         [style.color]="context.iconColor"
         [src]="context.icon"
     ></tui-svg>
-    <div
-        polymorpheus-outlet
-        [content]="context.content"
-    ></div>
+    <ng-container *polymorpheusOutlet="context.content as text">
+        {{ text }}
+    </ng-container>
     <button
         *ngIf="context.buttons.length > 1"
         tuiButton
@@ -35,8 +34,7 @@
     </button>
 </tui-push>
 <ng-template #content>
-    <div
-        polymorpheus-outlet
-        [content]="context.content"
-    ></div>
+    <ng-container *polymorpheusOutlet="context.content as text">
+        {{ text }}
+    </ng-container>
 </ng-template>