@snabcentr/client-ui 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snabcentr/client-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "author": "Snabcentr Ltd.",
   "repository": "https://gitlab.snabcentr.met/web/angular/snabcentr-client-ui-lib",
   "license": "Commercial",
@@ -12,6 +12,21 @@
     "@angular/router": ">=14.2.12",
     "@angular/platform-browser": ">=14.2.12",
     "@angular/platform-browser-dynamic": ">=14.2.12",
+    "@angular/material": ">=14.2.7",
+    "@snabcentr/client-core": ">=0.0.67",
+    "@taiga-ui/addon-charts": ">=3.42.1",
+    "@taiga-ui/addon-commerce": ">=3.42.1",
+    "@taiga-ui/addon-doc": ">=3.42.1",
+    "@taiga-ui/addon-mobile": ">=3.42.1",
+    "@taiga-ui/addon-preview": ">=3.42.1",
+    "@taiga-ui/addon-table": ">=3.42.1",
+    "@taiga-ui/addon-tablebars": ">=3.42.1",
+    "@taiga-ui/cdk": ">=3.42.1",
+    "@taiga-ui/core": ">=3.42.1",
+    "@taiga-ui/icons": ">=3.42.1",
+    "@taiga-ui/kit": ">=3.42.1",
+    "@taiga-ui/layout": ">=3.42.1",
+    "@taiga-ui/styles": ">=3.42.1",
     "moment": ">=2.29.4",
     "rxjs": ">=7.5.0",
     "zone.js": ">=0.12.0"

package/public-api.d.ts

@@ -1 +1,5 @@
-export * from './test-component/test.component';
+export * from './catalog';
+export * from './banner';
+export * from './icons';
+export * from './news';
+export * from './share-button';

package/share-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sc-share-button.component';
+export * from './sc-share-button.module';

package/share-button/sc-share-button.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Компонент кнопки "Поделиться".
+ */
+export declare class ScShareButtonComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScShareButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScShareButtonComponent, "sc-share-button", never, {}, {}, never, never, false>;
+}

package/share-button/sc-share-button.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./sc-share-button.component";
+import * as i2 from "@angular/common";
+/**
+ * Модуль работы кнопки "Поделиться".
+ */
+export declare class ScShareButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScShareButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ScShareButtonModule, [typeof i1.ScShareButtonComponent], [typeof i2.CommonModule], [typeof i1.ScShareButtonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ScShareButtonModule>;
+}

package/styles/taiga/variables.less

@@ -2,9 +2,8 @@
 @font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
 
 :root {
-    // Deprecated TODO 4.0 delete variables --tui-heading-font and --tui-text-font
-    --tui-heading-font: 'Manrope', @font-fallback;
-    --tui-text-font: 'Manrope', @font-fallback;
+    --tui-heading-font: Roboto, 'Helvetica Neue', sans-serif, @font-fallback;
+    --tui-text-font: Roboto, 'Helvetica Neue', sans-serif, @font-fallback;
     // Fonts
     --tui-font-heading: var(--tui-heading-font);
     --tui-font-heading-1: bold 3.125rem/3.5rem var(--tui-font-heading);
@@ -14,14 +13,14 @@
     --tui-font-heading-5: bold 1.5rem/1.75rem var(--tui-font-heading);
     --tui-font-heading-6: bold 1.25rem/1.5rem var(--tui-font-heading);
     --tui-font-text: var(--tui-text-font);
-    --tui-font-text-xl: normal 1.1875rem/1.75rem var(--tui-font-text);
-    --tui-font-text-l: normal 1.0625rem/1.75rem var(--tui-font-text);
-    --tui-font-text-l-2: normal 1.0625rem/1.5rem var(--tui-font-text);
+    --tui-font-text-xl: normal 1.25rem/1.75rem var(--tui-font-text);
+    --tui-font-text-l: normal 1.125rem/1.75rem var(--tui-font-text);
+    --tui-font-text-l-2: normal 1.125rem/1.5rem var(--tui-font-text);
     --tui-font-text-m: normal 1rem/1.5rem var(--tui-font-text);
     --tui-font-text-m-2: normal 1rem/1.25rem var(--tui-font-text);
-    --tui-font-text-s: normal 0.8125rem/1.25rem var(--tui-font-text);
-    --tui-font-text-s-2: normal 0.8125rem/1rem var(--tui-font-text);
-    --tui-font-text-xs: normal 0.6875rem/1rem var(--tui-font-text);
+    --tui-font-text-s: normal 0.875rem/1.25rem var(--tui-font-text);
+    --tui-font-text-s-2: normal 0.875rem/1rem var(--tui-font-text);
+    --tui-font-text-xs: normal 0.75rem/1rem var(--tui-font-text);
     // Sizes
     --tui-radius-xs: 0.25rem;
     --tui-radius-s: 0.5rem;
@@ -45,61 +44,61 @@
     // Base colors
     --tui-base-01: #fff; // background and icons on inverted background
     --tui-base-02: #f6f6f6; // secondary background, marker icons background
-    --tui-base-03: #ededed; // basic border
-    --tui-base-04: #d7d7d7; // hovered borders
-    --tui-base-05: #b0b0b0; // interface icons
-    --tui-base-06: #959595; // hovered interface icons
-    --tui-base-07: #808080; // inverted background
-    --tui-base-08: #333; // dark interface icons
+    --tui-base-03: #eeefef; // basic border
+    --tui-base-04: #E0DFE0; // hovered borders
+    --tui-base-05: #cbcbcb; // interface icons
+    --tui-base-06: #b8b8b8; // hovered interface icons
+    --tui-base-07: #888888; // inverted background
+    --tui-base-08: #666666; // dark interface icons
     --tui-base-09: #000; // icons on inverted background
-    --tui-primary: #526ed3; // primary buttons, background
-    --tui-primary-hover: #6c86e2; // primary buttons hover
-    --tui-primary-active: #314692; // primary buttons pressed
-    --tui-primary-text: #fff; // text on primary background
-    --tui-secondary: #ebefff; // inputs and secondary buttons
-    --tui-secondary-hover: #dfe3f3; // inputs and secondary buttons hover
-    --tui-secondary-active: #d8ddf2; // inputs and secondary buttons pressed
+    --tui-primary: #ffcc40; // primary buttons, background
+    --tui-primary-hover: #ffe49b; // primary buttons hover
+    --tui-primary-active: #ffbb00; // primary buttons pressed
+    --tui-primary-text: #000; // text on primary background
+    --tui-secondary: var(--tui-base-01); // inputs and secondary buttons
+    --tui-secondary-hover: var(--tui-base-04); // inputs and secondary buttons hover
+    --tui-secondary-active: var(--tui-base-02); // inputs and secondary buttons pressed
     --tui-accent: #ff7043; // fill and outline of accent elements
     --tui-accent-hover: #ff9a94; // accent elements hover
     --tui-accent-active: #e7716a; // accent elements pressed
     --tui-accent-text: #fff; // text on accent background
     --tui-selection: rgba(112, 182, 246, 0.12); // selected text background
     --tui-focus: rgba(51, 51, 51, 0.64); // focus ring color
-    --tui-clear: rgba(0, 0, 0, 0.04); // translucent dark fill
-    --tui-clear-disabled: rgba(0, 0, 0, 0.04); // translucent dark fill disabled
-    --tui-clear-hover: rgba(0, 0, 0, 0.16); // translucent dark fill hover
-    --tui-clear-active: rgba(0, 0, 0, 0.2); // translucent dark fill pressed
+    --tui-clear: rgba(246, 246, 246, 1); // translucent dark fill
+    --tui-clear-disabled: rgb(230, 229, 229); // translucent dark fill disabled
+    --tui-clear-hover: rgba(238, 239, 239, 1); // translucent dark fill hover
+    --tui-clear-active: rgba(224, 223, 224, 1); // translucent dark fill pressed
     --tui-clear-inverse: rgba(255, 255, 255, 0.16); // translucent light fill
     --tui-clear-inverse-hover: rgba(255, 255, 255, 0.24); // translucent light fill hover
     --tui-clear-inverse-active: rgba(255, 255, 255, 0.4); // translucent light fill pressed
     --tui-elevation-01: #fff; // background of elevated elements
     --tui-elevation-02: #fff; // background of elevated elements
     // Statuses
-    --tui-error-fill: rgba(244, 87, 37, 1); // icons and decorative elements with error status
-    --tui-error-bg: rgba(244, 87, 37, 0.12); // translucent error background
-    --tui-error-bg-hover: rgba(244, 87, 37, 0.24); // translucent hover error background
-    --tui-success-fill: rgba(74, 201, 155, 1); // icon and decorative elements with success status
-    --tui-success-bg: rgba(74, 201, 155, 0.12); // translucent success background
-    --tui-success-bg-hover: rgba(74, 201, 155, 0.24); // translucent success hover
-    --tui-warning-fill: rgba(255, 199, 0, 1); // icon and decorative elements with warning status
-    --tui-warning-bg: rgba(255, 199, 0, 0.12); // translucent warning background
-    --tui-warning-bg-hover: rgba(255, 199, 0, 0.24); // translucent warning background
-    --tui-info-fill: rgba(112, 182, 246, 1); // icon and decorative elements with info status
-    --tui-info-bg: rgba(112, 182, 246, 0.12); // translucent info background
-    --tui-info-bg-hover: rgba(112, 182, 246, 0.24); // translucent info background
-    --tui-neutral-fill: rgb(121, 129, 140); // icon and decorative elements with neutral status
-    --tui-neutral-bg: rgba(121, 129, 140, 0.12); // translucent info background
-    --tui-neutral-bg-hover: rgba(121, 129, 140, 0.24); // translucent info background
+    --tui-error-fill: rgba(226, 56, 56, 1); // icons and decorative elements with error status
+    --tui-error-bg: rgba(252, 230, 230, 1); // translucent error background
+    --tui-error-bg-hover: rgba(252, 209, 209, 1); // translucent hover error background
+    --tui-success-fill: rgba(67, 146, 39, 1); // icon and decorative elements with success status
+    --tui-success-bg: rgba(228, 242, 224, 1); // translucent success background
+    --tui-success-bg-hover: rgba(194, 220, 185, 1); // translucent success hover
+    --tui-warning-fill: var(--tui-primary); // icon and decorative elements with warning status
+    --tui-warning-bg: rgba(255, 246, 223, 1); // translucent warning background
+    --tui-warning-bg-hover: var(--tui-primary-hover);// translucent warning background
+    --tui-info-fill: rgba(119, 174, 237, 1); // icon and decorative elements with info status
+    --tui-info-bg: rgba(235, 245, 255, 1); // translucent info background
+    --tui-info-bg-hover: rgba(212, 231, 255, 1); // translucent info background
+    --tui-neutral-fill: var(--tui-base-07);// icon and decorative elements with neutral status
+    --tui-neutral-bg: var(--tui-base-02); // translucent info background
+    --tui-neutral-bg-hover: var(--tui-base-04); // translucent info background
     // Text
-    --tui-text-01: rgba(27, 31, 59, 1);
-    --tui-text-02: rgba(27, 31, 59, 0.65);
-    --tui-text-03: rgba(27, 31, 59, 0.4);
-    --tui-link: #526ed3;
-    --tui-link-hover: #6c86e2;
-    --tui-positive: #3aa981;
-    --tui-positive-hover: #7ac5aa;
-    --tui-negative: #dd4c1e;
-    --tui-negative-hover: #e38163;
+    --tui-text-01: var(--tui-base-09);
+    --tui-text-02: var(--tui-base-07);
+    --tui-text-03: var(--tui-base-05);
+    --tui-link: #1e50c8;
+    --tui-link-hover: #4c91ed;
+    --tui-positive: var(--tui-success-fill);
+    --tui-positive-hover: var(--tui-success-bg);
+    --tui-negative: var(--tui-error-fill);
+    --tui-negative-hover: var(--tui-error-bg-hover);
     // Modifiers for dark background
     --tui-error-fill-night: rgba(255, 140, 103, 1);
     --tui-error-bg-night: rgba(244, 87, 37, 0.32);

package/styles/tailwind/extend.js

@@ -0,0 +1,189 @@
+module.exports = {
+    fontFamily: {
+        'tui-heading': 'var(--tui-font-heading)',
+        'tui-text': 'var(--tui-font-text)',
+    },
+    borderRadius: {
+        'tui-radius-xs': 'var(--tui-radius-xs)',
+        'tui-radius-s': 'var(--tui-radius-s)',
+        'tui-radius-m': 'var(--tui-radius-m)',
+        'tui-radius-l': 'var(--tui-radius-l)',
+        'tui-radius-xl': 'var(--tui-radius-xl)',
+    },
+    fontSize: {
+        'tui-heading-1': 'var(--tui-font-heading-1)',
+        'tui-heading-2': 'var(--tui-font-heading-2)',
+        'tui-heading-3': 'var(--tui-font-heading-3)',
+        'tui-heading-4': 'var(--tui-font-heading-4)',
+        'tui-heading-5': 'var(--tui-font-heading-5)',
+        'tui-heading-6': 'var(--tui-font-heading-6)',
+        'tui-xl': 'var(--tui-font-text-xl)',
+        'tui-l': 'var(--tui-font-text-l)',
+        'tui-l-2': 'var(--tui-font-text-l-2)',
+        'tui-m': 'var(--tui-font-text-m)',
+        'tui-m-2': 'var(--tui-font-text-m-2)',
+        'tui-s': 'var(--tui-font-text-s)',
+        'tui-s-2': 'var(--tui-font-text-s-2)',
+        'tui-xs': 'var(--tui-font-text-xs)',
+    },
+    colors: {
+        // Base colors
+        'tui-autofill': 'var(--tui-autofill)',
+        'tui-base-01': 'var(--tui-base-01)',
+        'tui-base-02': 'var(--tui-base-02)',
+        'tui-base-03': 'var(--tui-base-03)',
+        'tui-base-04': 'var(--tui-base-04)',
+        'tui-base-05': 'var(--tui-base-05)',
+        'tui-base-06': 'var(--tui-base-06)',
+        'tui-base-07': 'var(--tui-base-07)',
+        'tui-base-08': 'var(--tui-base-08)',
+        'tui-base-09': 'var(--tui-base-09)',
+        'tui-primary': 'var(--tui-primary)',
+        'tui-primary-hover': 'var(--tui-primary-hover)',
+        'tui-primary-active': 'var(--tui-primary-active)',
+        'tui-primary-text': 'var(--tui-primary-text)',
+        'tui-secondary': 'var(--tui-secondary)',
+        'tui-secondary-hover': 'var(--tui-secondary-hover)',
+        'tui-secondary-active': 'var(--tui-secondary-active)',
+        'tui-accent': 'var(--tui-accent)',
+        'tui-accent-hover': 'var(--tui-accent-hover)',
+        'tui-accent-active': 'var(--tui-accent-active)',
+        'tui-accent-text': 'var(--tui-accent-text)',
+        'tui-selection': 'var(--tui-selection)',
+        'tui-focus': 'var(--tui-focus)',
+        'tui-clear': 'var(--tui-clear)',
+        'tui-clear-disabled': 'var(--tui-clear-disabled)',
+        'tui-clear-hover': 'var(--tui-clear-hover)',
+        'tui-clear-active': 'var(--tui-clear-active)',
+        'tui-clear-inverse': 'var(--tui-clear-inverse)',
+        'tui-clear-inverse-hover': 'var(--tui-clear-inverse-hover)',
+        'tui-clear-inverse-active': 'var(--tui-clear-inverse-active)',
+        'tui-elevation-01': 'var(--tui-elevation-01)',
+        'tui-elevation-02': 'var(--tui-elevation-02)',
+
+        // Statuses
+        'tui-error-fill': 'var(--tui-error-fill)',
+        'tui-error-bg': 'var(--tui-error-bg)',
+        'tui-error-bg-hover': 'var(--tui-error-bg-hover)',
+        'tui-success-fill': 'var(--tui-success-fill)',
+        'tui-success-bg': 'var(--tui-success-bg)',
+        'tui-success-bg-hover': 'var(--tui-success-bg-hover)',
+        'tui-warning-fill': 'var(--tui-warning-fill)',
+        'tui-warning-bg': 'var(--tui-warning-bg)',
+        'tui-warning-bg-hover': 'var(--tui-warning-bg-hover)',
+        'tui-info-fill': 'var(--tui-info-fill)',
+        'tui-info-bg': 'var(--tui-info-bg)',
+        'tui-info-bg-hover': 'var(--tui-info-bg-hover)',
+        'tui-neutral-fill': 'var(--tui-neutral-fill)',
+        'tui-neutral-bg': 'var(--tui-neutral-bg)',
+        'tui-neutral-bg-hover': 'var(--tui-neutral-bg-hover)',
+
+        // Text
+        'tui-text-01': 'var(--tui-text-01)',
+        'tui-text-02': 'var(--tui-text-02)',
+        'tui-text-03': 'var(--tui-text-03)',
+        'tui-link': 'var(--tui-link)',
+        'tui-link-hover': 'var(--tui-link-hover)',
+        'tui-positive': 'var(--tui-positive)',
+        'tui-positive-hover': 'var(--tui-positive-hover)',
+        'tui-negative': 'var(--tui-negative)',
+        'tui-negative-hover': 'var(--tui-negative-hover)',
+
+        // Modifiers for dark background
+        'tui-error-fill-night': 'var(--tui-error-fill-night)',
+        'tui-error-bg-night': 'var(--tui-error-bg-night)',
+        'tui-error-bg-night-hover': 'var(--tui-error-bg-night-hover)',
+        'tui-success-fill-night': 'var(--tui-success-fill-night)',
+        'tui-success-bg-night': 'var(--tui-success-bg-night)',
+        'tui-success-bg-night-hover': 'var(--tui-success-bg-night-hover)',
+        'tui-warning-fill-night': 'var(--tui-warning-fill-night)',
+        'tui-warning-bg-night': 'var(--tui-warning-bg-night)',
+        'tui-warning-bg-night-hover': 'var(--tui-warning-bg-night-hover)',
+        'tui-info-fill-night': 'var(--tui-info-fill-night)',
+        'tui-info-bg-night': 'var(--tui-info-bg-night)',
+        'tui-info-bg-night-hover': 'var(--tui-info-bg-night-hover)',
+        'tui-neutral-fill-night': 'var(--tui-neutral-fill-night)',
+        'tui-neutral-bg-night': 'var(--tui-neutral-bg-night)',
+        'tui-neutral-bg-night-hover': 'var(--tui-neutral-bg-night-hover)',
+        'tui-autofill-night': 'var(--tui-autofill-night)',
+        'tui-text-01-night': 'var(--tui-text-01-night)',
+        'tui-text-02-night': 'var(--tui-text-02-night)',
+        'tui-text-03-night': 'var(--tui-text-03-night)',
+        'tui-link-night': 'var(--tui-link-night)',
+        'tui-link-night-hover': 'var(--tui-link-night-hover)',
+        'tui-positive-night': 'var(--tui-positive-night)',
+        'tui-positive-night-hover': 'var(--tui-positive-night-hover)',
+        'tui-negative-night': 'var(--tui-negative-night)',
+        'tui-negative-night-hover': 'var(--tui-negative-night-hover)',
+
+        // Others
+        'tui-support-01': 'var(--tui-support-01)',
+        'tui-support-02': 'var(--tui-support-02)',
+        'tui-support-03': 'var(--tui-support-03)',
+        'tui-support-04': 'var(--tui-support-04)',
+        'tui-support-05': 'var(--tui-support-05)',
+        'tui-support-06': 'var(--tui-support-06)',
+        'tui-support-07': 'var(--tui-support-07)',
+        'tui-support-08': 'var(--tui-support-08)',
+        'tui-support-09': 'var(--tui-support-09)',
+        'tui-support-10': 'var(--tui-support-10)',
+        'tui-support-11': 'var(--tui-support-11)',
+        'tui-support-12': 'var(--tui-support-12)',
+        'tui-support-13': 'var(--tui-support-13)',
+        'tui-support-14': 'var(--tui-support-14)',
+        'tui-support-15': 'var(--tui-support-15)',
+        'tui-support-16': 'var(--tui-support-16)',
+        'tui-support-17': 'var(--tui-support-17)',
+        'tui-support-18': 'var(--tui-support-18)',
+        'tui-support-19': 'var(--tui-support-19)',
+        'tui-support-20': 'var(--tui-support-20)',
+        'tui-support-21': 'var(--tui-support-21)',
+        'tui-chart-0': 'var(--tui-chart-0)',
+        'tui-chart-1': 'var(--tui-chart-1)',
+        'tui-chart-2': 'var(--tui-chart-2)',
+        'tui-chart-3': 'var(--tui-chart-3)',
+        'tui-chart-4': 'var(--tui-chart-4)',
+    },
+    boxShadow: {
+        sc: '2px 7px 20px 1px rgba(0, 0, 0, 0.1)',
+    },
+    width: {
+        // TODO: доработать после исправления всего дизайна.
+        50: '12.5rem',
+        39.5: '9.875rem',
+        70: '17.5rem',
+    },
+    height: {
+        'tui-height-xs': 'var(--tui-height-xs)',
+        'tui-height-s': 'var(--tui-height-s)',
+        'tui-height-m': 'var(--tui-height-m)',
+        'tui-height-l': 'var(--tui-height-l)',
+        // TODO: доработать после исправления всего дизайна.
+        35: '8.75rem',
+        39.5: '9.875rem',
+        50: '12.5rem',
+        82: '20.5rem',
+    },
+    padding: {
+        'tui-padding-s': 'var(--tui-padding-s)',
+        'tui-padding-m': 'var(--tui-padding-m)',
+        'tui-padding-l': 'var(--tui-padding-l)',
+        // TODO: доработать после исправления всего дизайна.
+        4.5: '1.125rem',
+    },
+    opacity: {
+        'tui-padding-s': 'var(--tui-padding-s)',
+        'tui-padding-m': 'var(--tui-padding-m)',
+        'tui-padding-l': 'var(--tui-padding-l)',
+    },
+    maxHeight: {
+        35: '8.75rem',
+    },
+    minHeight: {
+        8: '2rem',
+        10: '2.5rem',
+    },
+    spacing: {
+        15: '3.75rem',
+    },
+};