@design-factory/design-factory 15.2.3 → 16.0.0

package/schematics/migrations/utils/typescript/functions.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import * as ts from 'typescript';
+/**
+ * Unwraps a given expression TypeScript node. Expressions can be wrapped within multiple
+ * parentheses. e.g. "(((({exp}))))()". The function should return the TypeScript node
+ * referring to the inner expression. e.g "exp".
+ */
+export declare function unwrapExpression(node: ts.Expression | ts.ParenthesizedExpression): ts.Expression;

package/schematics/migrations/utils/typescript/functions.js

@@ -0,0 +1,20 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unwrapExpression = void 0;
+const ts = require("typescript");
+/**
+ * Unwraps a given expression TypeScript node. Expressions can be wrapped within multiple
+ * parentheses. e.g. "(((({exp}))))()". The function should return the TypeScript node
+ * referring to the inner expression. e.g "exp".
+ */
+function unwrapExpression(node) {
+    return ts.isParenthesizedExpression(node) ? unwrapExpression(node.expression) : node;
+}
+exports.unwrapExpression = unwrapExpression;

package/schematics/migrations/utils/typescript/imports.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import * as ts from 'typescript';
+/** Interface describing a resolved import. */
+export interface Import {
+    /** Name of the imported symbol. */
+    symbolName: string;
+    /** Module name from which the symbol has been imported. */
+    moduleName: string;
+}
+/** Resolves the import of the specified identifier. */
+export declare function getImportOfIdentifier(node: ts.Identifier, typeChecker: ts.TypeChecker): Import | null;

package/schematics/migrations/utils/typescript/imports.js

@@ -0,0 +1,110 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImportOfIdentifier = void 0;
+const ts = require("typescript");
+/** Resolves the import of the specified identifier. */
+function getImportOfIdentifier(node, typeChecker) {
+    // Free standing identifiers which resolve to an import will be handled
+    // as direct imports. e.g. "@Component()" where "Component" is an identifier
+    // referring to an import specifier.
+    const directImport = getSpecificImportOfIdentifier(node, typeChecker);
+    if (directImport !== null) {
+        return directImport;
+    }
+    else if (ts.isQualifiedName(node.parent) && node.parent.right === node) {
+        // Determines the import of a qualified name. e.g. "let t: core.Component". In that
+        // case, the import of the most left identifier will be determined ("core").
+        const qualifierRoot = getQualifiedNameRoot(node.parent);
+        if (qualifierRoot) {
+            const moduleName = getImportOfNamespacedIdentifier(qualifierRoot, typeChecker);
+            if (moduleName) {
+                return { moduleName, symbolName: node.text };
+            }
+        }
+    }
+    else if (ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) {
+        // Determines the import of a property expression. e.g. "@core.Component". In that
+        // case, the import of the most left identifier will be determined ("core").
+        const rootIdentifier = getPropertyAccessRoot(node.parent);
+        if (rootIdentifier) {
+            const moduleName = getImportOfNamespacedIdentifier(rootIdentifier, typeChecker);
+            if (moduleName) {
+                return { moduleName, symbolName: node.text };
+            }
+        }
+    }
+    return null;
+}
+exports.getImportOfIdentifier = getImportOfIdentifier;
+/**
+ * Resolves the import of the specified identifier. Expects the identifier to resolve
+ * to a fine-grained import declaration with import specifiers.
+ */
+function getSpecificImportOfIdentifier(node, typeChecker) {
+    const symbol = typeChecker.getSymbolAtLocation(node);
+    if (!symbol || !symbol.declarations || !symbol.declarations.length) {
+        return null;
+    }
+    const declaration = symbol.declarations[0];
+    if (!ts.isImportSpecifier(declaration)) {
+        return null;
+    }
+    // Since the declaration is an import specifier, we can walk up three times to get a reference
+    // to the import declaration node (NamedImports -> ImportClause -> ImportDeclaration).
+    const importDecl = declaration.parent.parent.parent;
+    if (!ts.isStringLiteral(importDecl.moduleSpecifier)) {
+        return null;
+    }
+    return {
+        moduleName: importDecl.moduleSpecifier.text,
+        symbolName: declaration.propertyName ? declaration.propertyName.text : declaration.name.text
+    };
+}
+/**
+ * Resolves the import of the specified identifier. Expects the identifier to
+ * resolve to a namespaced import declaration. e.g. "import * as core from ...".
+ */
+function getImportOfNamespacedIdentifier(node, typeChecker) {
+    const symbol = typeChecker.getSymbolAtLocation(node);
+    if (!symbol || !symbol.declarations || !symbol.declarations.length) {
+        return null;
+    }
+    const declaration = symbol.declarations[0];
+    if (!ts.isNamespaceImport(declaration)) {
+        return null;
+    }
+    // Since the declaration is a namespace import, we can walk up three times to get a reference
+    // to the import declaration node (NamespaceImport -> ImportClause -> ImportDeclaration).
+    const importDecl = declaration.parent.parent;
+    if (!ts.isStringLiteral(importDecl.moduleSpecifier)) {
+        return null;
+    }
+    return importDecl.moduleSpecifier.text;
+}
+/**
+ * Gets the root identifier of a qualified type chain. For example: "core.GestureConfig"
+ * will return the "core" identifier. Allowing us to find the import of "core".
+ */
+function getQualifiedNameRoot(name) {
+    while (ts.isQualifiedName(name.left)) {
+        name = name.left;
+    }
+    return ts.isIdentifier(name.left) ? name.left : null;
+}
+/**
+ * Gets the root identifier of a property access chain. For example: "core.GestureConfig"
+ * will return the "core" identifier. Allowing us to find the import of "core".
+ */
+function getPropertyAccessRoot(node) {
+    while (ts.isPropertyAccessExpression(node.expression)) {
+        node = node.expression;
+    }
+    return ts.isIdentifier(node.expression) ? node.expression : null;
+}

package/schematics/migrations/utils/typescript/line-mappings.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+export interface LineAndCharacter {
+    character: number;
+    line: number;
+}
+/** Gets the line and character for the given position from the line starts map. */
+export declare function getLineAndCharacterFromPosition(lineStartsMap: number[], position: number): {
+    character: number;
+    line: number;
+};
+/**
+ * Computes the line start map of the given text. This can be used in order to
+ * retrieve the line and character of a given text position index.
+ */
+export declare function computeLineStartsMap(text: string): number[];

package/schematics/migrations/utils/typescript/line-mappings.js

@@ -0,0 +1,75 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeLineStartsMap = exports.getLineAndCharacterFromPosition = void 0;
+/*
+ * Line mapping utilities which can be used to retrieve line and character based
+ * on an absolute character position in a given file. This functionality is similar
+ * to TypeScript's "ts.getLineAndCharacterFromPosition" utility, but we cannot leverage
+ * their logic for line mappings as it's internal and we need to generate line mappings
+ * for non-TypeScript files such as HTML templates or stylesheets.
+ *
+ * Line and character can be retrieved by splitting a given source text based on
+ * line breaks into line start entries. Later when a specific position is requested,
+ * the closest line-start position is determined based on the given position.
+ */
+const LF_CHAR = 10;
+const CR_CHAR = 13;
+const LINE_SEP_CHAR = 8232;
+const PARAGRAPH_CHAR = 8233;
+/** Gets the line and character for the given position from the line starts map. */
+function getLineAndCharacterFromPosition(lineStartsMap, position) {
+    const lineIndex = findClosestLineStartPosition(lineStartsMap, position);
+    return { character: position - lineStartsMap[lineIndex], line: lineIndex };
+}
+exports.getLineAndCharacterFromPosition = getLineAndCharacterFromPosition;
+/**
+ * Computes the line start map of the given text. This can be used in order to
+ * retrieve the line and character of a given text position index.
+ */
+function computeLineStartsMap(text) {
+    const result = [0];
+    let pos = 0;
+    while (pos < text.length) {
+        const char = text.charCodeAt(pos++);
+        // Handles the "CRLF" line break. In that case we peek the character
+        // after the "CR" and check if it is a line feed.
+        if (char === CR_CHAR) {
+            if (text.charCodeAt(pos) === LF_CHAR) {
+                pos++;
+            }
+            result.push(pos);
+        }
+        else if (char === LF_CHAR || char === LINE_SEP_CHAR || char === PARAGRAPH_CHAR) {
+            result.push(pos);
+        }
+    }
+    result.push(pos);
+    return result;
+}
+exports.computeLineStartsMap = computeLineStartsMap;
+/** Finds the closest line start for the given position. */
+function findClosestLineStartPosition(linesMap, position, low = 0, high = linesMap.length - 1) {
+    while (low <= high) {
+        const pivotIndex = Math.floor((low + high) / 2);
+        const pivotEl = linesMap[pivotIndex];
+        if (pivotEl === position) {
+            return pivotIndex;
+        }
+        else if (position > pivotEl) {
+            low = pivotIndex + 1;
+        }
+        else {
+            high = pivotIndex - 1;
+        }
+    }
+    // In case there was no exact match, return the closest "lower" line index. We also
+    // subtract the index by one because want the index of the previous line start.
+    return low - 1;
+}

package/schematics/migrations/utils/typescript/parse_tsconfig.js

@@ -27,4 +27,3 @@ function parseTsconfigFile(tsconfigPath, basePath) {
     return ts.parseJsonConfigFileContent(config, parseConfigHost, basePath, {});
 }
 exports.parseTsconfigFile = parseTsconfigFile;
-//# sourceMappingURL=parse_tsconfig.js.map

package/schematics/migrations/utils/typescript/property-name.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import * as ts from 'typescript';
+/** Type that describes a property name with an obtainable text. */
+type PropertyNameWithText = Exclude<ts.PropertyName, ts.ComputedPropertyName>;
+/**
+ * Gets the text of the given property name. Returns null if the property
+ * name couldn't be determined statically.
+ */
+export declare function getPropertyNameText(node: ts.PropertyName): string | null;
+/** Checks whether the given property name has a text. */
+export declare function hasPropertyNameText(node: ts.PropertyName): node is PropertyNameWithText;
+export {};

package/schematics/migrations/utils/typescript/property-name.js

@@ -0,0 +1,27 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasPropertyNameText = exports.getPropertyNameText = void 0;
+const ts = require("typescript");
+/**
+ * Gets the text of the given property name. Returns null if the property
+ * name couldn't be determined statically.
+ */
+function getPropertyNameText(node) {
+    if (ts.isIdentifier(node) || ts.isStringLiteralLike(node)) {
+        return node.text;
+    }
+    return null;
+}
+exports.getPropertyNameText = getPropertyNameText;
+/** Checks whether the given property name has a text. */
+function hasPropertyNameText(node) {
+    return ts.isStringLiteral(node) || ts.isNumericLiteral(node) || ts.isIdentifier(node);
+}
+exports.hasPropertyNameText = hasPropertyNameText;

package/schematics/ng-add/index.js

@@ -81,4 +81,3 @@ function ngAdd(options) {
     };
 }
 exports.default = ngAdd;
-//# sourceMappingURL=index.js.map

package/schematics/ng-add/schema.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=schema.js.map

package/styles/scss/_common.root.scss

@@ -0,0 +1,37 @@
+:root {
+  --#{$prefix}disabled-color: #{$df-disabled-color};
+  --#{$prefix}disabled-bg-color: #{$gray-100};
+  --#{$prefix}focus-outline: #{$df-focus-outline};
+  --#{$prefix}disabled-cursor: #{$df-disabled-cursor};
+  --#{$prefix}link-hover-text-decoration: #{$df-link-hover-text-decoration};
+  --#{$prefix}disabled-opacity: #{$df-disabled-opacity};
+  --#{$prefix}box-shadow: #{$df-box-shadow};
+  --#{$prefix}focused-box-shadow: #{$df-focused-box-shadow};
+  --#{$prefix}font-family: #{$df-font-family};
+
+  --#{$prefix}dark-primary: #{$dark-primary};
+  --#{$prefix}yellow-rgb: #{to-rgb($yellow)};
+  --#{$prefix}dark-primary-rgb: #{to-rgb($dark-primary)};
+  --#{$prefix}white-color: #{color-contrast($white)};
+  --#{$prefix}black-color: #{color-contrast($black)};
+
+  @each $breakpoint, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$breakpoint}: #{$value};
+  }
+
+  @each $color, $value in $shade-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $shade-colors-rgb {
+    --#{$prefix}#{$color}-rgb: #{$value};
+  }
+
+  @each $color, $value in $shade-colors-text {
+    --#{$prefix}#{$color}-color: #{$value};
+  }
+
+  @each $color, $value in $shade-colors-text-rgb {
+    --#{$prefix}#{$color}-color-rgb: #{$value};
+  }
+}

package/styles/scss/_common.scss

@@ -13,7 +13,8 @@
 
 @each $extension, $ratio in $df-size-ratios {
   .df-font-#{$extension} {
-    font-size: $font-size-base * $ratio;
+    --#{$prefix}body-font-size: #{$font-size-base * $ratio};
+    font-size: var(--#{$prefix}body-font-size);
   }
 }
 
@@ -29,7 +30,7 @@
   border-radius: $df-focused-border-radius;
   box-shadow: $df-focused-box-shadow;
   border: $df-focused-border;
-  outline: none; //disable default
+  outline: var(--#{$prefix}focus-outline); //disable default
 }
 
 @each $degree, $value in $df-degrees {
@@ -48,10 +49,3 @@
   display: flex;
   flex-direction: column;
 }
-
-// Generate breakpoint CSS variable to be used in media service
-:root {
-  @each $breakpoint, $value in $grid-breakpoints {
-    --#{$variable-prefix}breakpoint-#{$breakpoint}: #{$value};
-  }
-}

package/styles/scss/_common.variables.scss

@@ -4,7 +4,7 @@
 
 // stylelint-disable-next-line scss/dollar-variable-pattern
 $font-path: '../../../../assets/fonts' !default;
-$df-brand-primary-85: #006cd4 !default; //add, use for hover
+$df-brand-primary-85: #006cd4 !default; // deprecated sass var
 $df-font-family: Design-Factory-icon !default;
 $df-font-icon-color: $gray-600 !default;
 $df-mandatory-indicator-color: $danger !default;
@@ -35,16 +35,26 @@ $df-size-ratios: map.merge(
 
 $df-cursor-type: pointer !default;
 $df-focused-border-radius: $border-radius !default;
-$df-focused-box-shadow: $btn-focus-box-shadow !default;
-$df-focused-border: $border-width solid $primary !default;
+$df-focused-box-shadow: $input-btn-focus-box-shadow !default; // $input-btn-focus-box-shadow need to be customize for changing the whole box-shadow
+$df-focused-inset-box-shadow: inset 0 0 var(--#{$prefix}box-shadow-blur, $input-btn-focus-blur) var(--#{$prefix}box-shadow-width, $input-btn-focus-width) var(--#{$prefix}box-shadow-color, $input-btn-focus-color) !default; // default $input-btn-focus-box-shadow
+$df-focused-border: $border-width solid shades-css-var("primary") !default;
 $df-enable-rtl: false !default;
 
 // Disabled state
-$df-disabled-bg-color: $gray-100 !default;
-$df-disabled-color: $gray-300 !default;
+$df-disabled-bg-color: var(--#{$prefix}gray-100) !default;
+$df-disabled-color: var(--#{$prefix}gray-300) !default;
 $df-disabled-opacity: 1 !default;
 $df-disabled-cursor: not-allowed !default;
-$df-hover-bg-color: $gray-100 !default; // hover on light (white) bg not button
+$df-hover-bg-color: shades-css-var('white', 'bg-hover-color') !default; // hover on light (white) bg not button. Migrate to white color shade ?
+$df-focus-outline: none !default;
+
+// TODO propagate the usage of the variables for the link hover text-decoration
+$df-link-hover-text-decoration: none !default;
+// TODO same for visited / disabled / more link / icon in link ?
+// stylelint-disable scss/dollar-variable-pattern
+$shade-colors-rgb: map-loop($shade-colors, to-rgb, "$value") !default;
+$shade-colors-text: map-loop($shade-colors, color-contrast, "$value") !default;
+$shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, "$value") !default;
 
 //Windows High Contrast Mode
 $df-high-contrast-color: rgba(0, 0, 0, 0) !default;

package/styles/scss/_variables.scss

@@ -38,7 +38,6 @@
 @import 'components/collapse/collapse.variables';
 @import 'components/progressbar/progressbar.variables';
 @import 'components/spinner/spinner.variables';
-@import 'components/tooltip/tooltip.variables';
 @import 'components/rating/rating.variables';
 @import 'components/list-group/list-group.variables';
 @import 'components/datepicker/datepicker.variables';

package/styles/scss/bootstrap/_maps.scss

@@ -22,7 +22,7 @@ $utilities-colors: map.merge(
 // scss-docs-end utilities-colors
 
 // scss-docs-start utilities-text-colors
-// $utilities-text: map-merge(
+// $utilities-text: map.merge(
 //   $utilities-colors,
 //   (
 //     "black": to-rgb($black),
@@ -34,14 +34,15 @@ $utilities-colors: map.merge(
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
-// $utilities-bg: map-merge(
-//   $utilities-colors,
-//   (
-//     "black": to-rgb($black),
-//     "white": to-rgb($white),
-//     "body": to-rgb($body-bg)
-//   )
-// ) !default;
+$utilities-bg: map.merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg),
+    "dark-primary": to-rgb($dark-primary),
+  )
+) !default;
 // $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors
 

package/styles/scss/bootstrap/_mixins-override.scss

@@ -66,4 +66,30 @@
       border-bottom-right-radius: valid-radius($radius);
     }
   }
+}
+
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $text-color: shades-css-var($state, 'bg-color', true);
+    $hover-bg-color: shades-css-var($state, 'bg-subtle-color');
+    $text-hover-color: shades-css-var($state, 'bg-subtle-color', true);
+    $striped-bg-color: shades-css-var($state, 'bg-subtle-hover-color');
+    $striped-text-color: shades-css-var($state, 'bg-subtle-hover-color', true);
+    $active-bg: shades-css-var($state, 'bg-subtle-active-color');
+    $active-text-color: shades-css-var($state, 'bg-subtle-active-color', true);
+    $border-color: shades-css-var($state, 'border-color');
+    
+    --#{$prefix}table-color: #{$text-color};
+    --#{$prefix}table-bg: #{$background};
+    --#{$prefix}table-border-color: #{$border-color};
+    --#{$prefix}table-striped-bg: #{$striped-bg-color};
+    --#{$prefix}table-striped-color: #{$striped-text-color};
+    --#{$prefix}table-active-bg: #{$active-bg};
+    --#{$prefix}table-active-color: #{$active-text-color};
+    --#{$prefix}table-hover-bg: #{$hover-bg-color};
+    --#{$prefix}table-hover-color: #{$text-hover-color};
+
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
+  }
 }