@swisspost/design-system-styles 6.4.3 → 6.5.0

package/mixins/_button.scss

@@ -4,7 +4,6 @@
 @use './../variables/components/button';
 @use './../variables/type';
 @use './../variables/color' as color-var;
-@use './../placeholders/color' as color-ph;
 @use './../functions/contrast' as contrast-fn;
 @use 'utilities';
 

package/mixins/_focus.scss

@@ -0,0 +1,9 @@
+@use '../variables/commons';
+
+@mixin focus-ring {
+  outline: none;
+
+  &:focus-visible {
+    outline: commons.$outline-width solid commons.$outline-color;
+  }
+}

package/mixins/_index.scss

@@ -2,6 +2,7 @@
 @forward 'badge';
 @forward 'button';
 @forward 'color';
+@forward 'focus';
 @forward 'form-checks';
 @forward 'forms';
 @forward 'icons';

package/mixins/_notification.scss

@@ -111,7 +111,12 @@
     @include icons-mx.icon($icon);
   }
 
-  // icon override (post-icon)
+  // Prevent flashing when using post-icon
+  &:has(> post-icon)::before {
+    content: none;
+  }
+
+  // icon override (post-icon), needed when :has is not supported
   > post-icon {
     background-color: $color;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.4.3",
+  "version": "6.5.0",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -16,25 +16,27 @@
     "access": "public",
     "linkDirectory": true
   },
+  "peerDependencies": {
+    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
+    "bootstrap": "~5.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@ng-bootstrap/ng-bootstrap": {
+      "optional": true
+    },
+    "bootstrap": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@angular-devkit/core": "=15.0.4",
-    "@angular-devkit/schematics": "=15.0.4",
-    "@angular/core": "=15.0.4",
     "@popperjs/core": "2.11.8",
-    "bootstrap": "5.3.2",
-    "cheerio": "1.0.0-rc.12",
-    "prettier": "3.0.3"
+    "bootstrap": "5.3.2"
   },
   "devDependencies": {
-    "@angular/compiler": "=15.0.4",
-    "@percy/cli": "1.27.3",
-    "@percy/cypress": "3.1.2",
-    "@swisspost/design-system-icons": "1.0.13",
-    "@types/node": "18.18.0",
+    "@swisspost/design-system-icons": "1.0.16",
+    "@types/node": "18.19.2",
     "autoprefixer": "10.4.16",
     "copyfiles": "2.4.1",
-    "cypress": "13.3.3",
-    "cypress-storybook": "0.5.1",
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-newer": "^1.4.0",
@@ -42,40 +44,31 @@
     "gulp-sass": "5.1.0",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.31",
+    "postcss": "8.4.32",
     "postcss-scss": "4.0.9",
+    "prettier": "3.1.0",
     "rimraf": "5.0.5",
     "sass": "1.69.5",
     "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-sass-guidelines": "10.0.0",
-    "stylelint-prettier": "4.0.2",
-    "stylelint-scss": "5.2.1",
+    "stylelint-prettier": "4.1.0",
+    "stylelint-scss": "5.3.1",
     "typescript": "4.9.5"
   },
   "sass": {
     "includePaths": [
       "node_modules"
     ],
-    "outputDir": "./dist",
-    "tscOutDir": "./out-tsc/lib"
-  },
-  "schematics": "./schematics/migrations.json",
-  "ng-update": {
-    "migrations": "./schematics/migrations.json"
+    "outputDir": "./dist"
   },
   "scripts": {
-    "start": "npm-run-all --parallel styles:start schematics:start",
-    "styles:start": "gulp watch",
-    "prebuild": "pnpm clean",
-    "build": "npm-run-all --parallel styles:build schematics:build",
-    "styles:build": "gulp build",
+    "start": "gulp watch",
+    "build": "pnpm clean && gulp build",
     "unit": "gulp sass:tests",
     "clean": "rimraf out-tsc dist",
     "format": "prettier src/**/*.scss --write",
     "lint": "stylelint src/**/*.scss",
-    "lint:fix": "stylelint src/**/*.scss --fix",
-    "schematics:start": "copyfiles schematics/migrations.json dist && tsc -p tsconfig.schematics.json --watch",
-    "schematics:build": "copyfiles schematics/migrations.json dist && tsc -p tsconfig.schematics.json"
+    "lint:fix": "stylelint src/**/*.scss --fix"
   }
 }

package/placeholders/_index.scss

@@ -1,2 +1,6 @@
+@use './badge';
+@use './button';
+@use './close';
+@use './color';
 @use './dropdown';
 @use './text';

package/variables/_color.scss

@@ -38,7 +38,7 @@ $olive-bright: #aa9d2e;
 $aubergine-dark: #523178;
 $aubergine-bright: #7566a0;
 
-// Contextual colors
+// Contextual colors (deprecated)
 $success: #2c911c;
 $success-text: #255e1c;
 $error: #a51728;
@@ -46,6 +46,14 @@ $error-text: #8f0d1c;
 $warning: #f49e00;
 $info: #cce4ee;
 
+// Signal Colors
+$success-green: #2c871d;
+$error-red: #a51728;
+$warning-orange: #f49e00;
+$success-background: #c0debb;
+$error-background: #ffdade;
+$warning-background: #fce2b2;
+
 /**
  * Maps. Allow maps to have custom colors from the project
  * by always merging into a default empty map
@@ -67,13 +75,26 @@ $contextual-colors: () !default;
 $contextual-colors: map.merge(
   $contextual-colors,
   (
-    'success': $success,
     'info': $info,
+    'success': $success,
     'warning': $warning,
     'danger': $error,
   )
 );
 
+$signal-colors: () !default;
+$signal-colors: map.merge(
+  $signal-colors,
+  (
+    'success-green': $success-green,
+    'error-red': $error-red,
+    'warning-orange': $warning-orange,
+    'success-background': $success-background,
+    'error-background': $error-background,
+    'warning-background': $warning-background,
+  )
+);
+
 $accent-colors: () !default;
 $accent-colors: map.merge(
   $accent-colors,
@@ -111,6 +132,7 @@ $background-colors: map.merge(
 // Merge with the other lists
 $background-colors: map.merge($background-colors, $contextual-colors);
 $background-colors: map.merge($background-colors, $accent-colors);
+$background-colors: map.merge($background-colors, $signal-colors);
 
 // Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
 $dark-backgrounds: () !default;

package/variables/_commons.scss

@@ -17,6 +17,9 @@ $box-shadow: 0 0 5px 0 rgba(color.$black, 0.3) !default;
 $box-shadow-lg: 0 0 8px 0 rgba(color.$black, 0.4) !default;
 $box-shadow-hover: 0 0 1rem 0 rgba(color.$black, 0.08) !default;
 
+$outline-width: 2px !default;
+$outline-color: #1976c8 !default;
+
 $caret-width: 0.3em !default;
 
 // Z-index master list

package/variables/_grid.scss

@@ -5,33 +5,11 @@
 $grid-breakpoints-list: xs sm rg md lg xl xxl;
 
 // Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
 $container-max-widths: (
   xl: 1280px,
   xxl: 1440px,
 ) !default;
 
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns: 12 !default;
-
-/* Deprecated: $grid-gutter-width */
-$grid-gutter-width: 30px !default;
-
-/* Deprecated: "rg" breakpoint */
-$grid-gutter-x: (
-  xs: 12px,
-  sm: 16px,
-  rg: 16px,
-  md: 16px,
-  lg: 16px,
-  xl: 16px,
-  xxl: 16px,
-) !default;
-
 /* Deprecated: "rg" breakpoint */
 $grid-container-padding: (
   xs: 12px,
@@ -53,3 +31,20 @@ $grid-container-fluid-padding: (
   xl: map.get($grid-container-padding, lg),
   xxl: map.get($grid-container-padding, lg),
 ) !default;
+
+// Grid columns
+$grid-columns: 12 !default;
+
+/* Deprecated: $grid-gutter-width */
+$grid-gutter-width: 30px !default;
+
+/* Deprecated: "rg" breakpoint */
+$grid-gutter-x: (
+  xs: 12px,
+  sm: 16px,
+  rg: 16px,
+  md: 16px,
+  lg: 16px,
+  xl: 16px,
+  xxl: 16px,
+) !default;

package/variables/components/_accordion.scss

@@ -9,28 +9,30 @@
 @use './button';
 
 $accordion-padding: spacing.$spacer !default;
+$accordion-gap: spacing.$size-mini !default;
 $accordion-border-width: commons.$border-thick !default;
-$accordion-border-color: color.$gray-10 !default;
+$accordion-border-color: color.$gray-60 !default;
 
-$accordion-header-font-curve: 'regular' !default;
+$accordion-header-color: color.$gray-80 !default;
+$accordion-header-font-size: type.$font-size-16 !default;
 $accordion-header-font-weight: type.$font-weight-bold !default;
 $accordion-header-line-height: type.$line-height-copy !default;
 
-$accordion-button-cursor: pointer !default;
+$accordion-button-transition: button.$btn-transition !default;
 $accordion-button-padding: $accordion-padding !default;
+$accordion-button-gap: $accordion-gap !default;
 $accordion-button-disabled-opacity: button.$btn-disabled-opacity !default;
 $accordion-button-focus-box-shadow: button.$btn-focus-box-shadow !default;
+$accordion-button-hover-color: color.$black !default;
+$accordion-button-hover-bg: color.$gray-10 !default;
 
 $accordion-icon-name: 2112 !default;
 $accordion-icon-size: spacing.$size-large !default;
 $accordion-icon-transition: transform animation.$transition-base-timing !default;
 $accordion-icon-transform: rotate(-180deg) !default;
 
-$accordion-body-padding: spacing.$size-small-regular $accordion-padding spacing.$size-bigger-big !default;
-
-$accordion-heading-margin: spacing.$size-bigger-big 0 0 !default;
-$accordion-heading-font-curve: $accordion-header-font-curve !default;
-$accordion-heading-font-weight: $accordion-header-font-weight !default;
+$accordion-body-padding: $accordion-gap $accordion-padding $accordion-padding !default;
+$accordion-body-font-weight: type.$font-weight-light !default;
 
 // Deprecated
 $accordion-padding-x: spacing.$size-regular !default;
@@ -54,3 +56,8 @@ $_accordion-hcm-chevron: icons.get-colored-svg-url(2113, color.$white);
 $accordion-button-icon: url($_accordion-chevron);
 $accordion-button-active-icon: url($_accordion-active-chevron);
 $accordion-hcm-icon: url($_accordion-hcm-chevron);
+$accordion-header-font-curve: 'regular' !default;
+$accordion-heading-margin: spacing.$size-bigger-big 0 0 !default;
+$accordion-heading-font-curve: $accordion-header-font-curve !default;
+$accordion-heading-font-weight: $accordion-header-font-weight !default;
+$accordion-button-cursor: pointer !default;

package/variables/components/_form-select.scss

@@ -7,7 +7,17 @@ $form-select-disabled-color: forms.$input-disabled-color;
 $form-select-disabled-bg: forms.$input-disabled-bg;
 $form-select-disabled-border-color: forms.$input-disabled-border-color;
 $form-select-indicator-color: color.$black;
-$form-select-bg-size: 24px 24px !default;
+$form-select-bg-size: 32px 32px !default;
+$form-select-bg-size-sm: 24px 24px !default;
 $_form-select-indicator-icon: icons.get-colored-svg-url('2113', $form-select-indicator-color);
 $form-select-indicator: url($_form-select-indicator-icon) !default;
+$form-select-indicator-disabled: url(icons.get-colored-svg-url(
+  '2113',
+  $form-select-disabled-color
+)) !default;
+$form-select-indicator-success: url(icons.get-colored-svg-url(
+  '2105',
+  color.$success-green
+)) !default;
+$form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
 $form-select-indicator-hcm: url(icons.get-colored-svg-url('2113', color.$white)) !default;

package/variables/components/_forms.scss

@@ -13,7 +13,7 @@
 // Forms
 
 $form-label-margin-bottom: 0.5rem !default;
-$form-label-color: rgba(var(--post-contrast-color-rgb), 0.8) !default;
+$form-label-color: var(--post-contrast-color) !default;
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
@@ -33,8 +33,8 @@ $input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
-$input-disabled-color: color.$gray-60; // Design System only
-$input-disabled-border-color: color.$gray-20; // Design System only
+$input-disabled-color: color.$gray-40; // Design System only
+$input-disabled-border-color: color.$gray-40; // Design System only
 
 $input-color: color.$black !default;
 $input-border-color: color.$gray-60 !default;
@@ -66,6 +66,13 @@ $input-height-content-sm: type.$font-size-tiny * $input-line-height-sm !default;
 $input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) !default;
 $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
 
+$form-floating-input-height-content-sm: type.$font-size-12 * $input-line-height-sm * 2 !default;
+$form-floating-input-height-inner-sm: $form-floating-input-height-content-sm +
+  ($input-padding-y-sm * 2) !default;
+$form-floating-input-height-sm: calc(
+  #{$form-floating-input-height-inner-sm} + #{$input-height-border}
+) !default;
+
 $input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default;
 $input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default;
 $input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default;
@@ -74,7 +81,9 @@ $input-height-content-lg: type.$font-size-medium * $input-line-height-lg !defaul
 $input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
 $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
-$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+$input-transition:
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
 
 $form-text-color: var(--post-contrast-color);
 $form-text-font-size: type.$font-size-tiny;
@@ -94,7 +103,9 @@ $form-range-thumb-width: 2rem !default;
 $form-range-thumb-height: $form-range-thumb-width !default;
 $form-range-thumb-bg: color.$white !default;
 $form-range-thumb-border: 2px solid color.$black !default;
-$form-range-thumb-focus-box-shadow: 0 0 0 1px color.$black, 0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
+$form-range-thumb-focus-box-shadow:
+  0 0 0 1px color.$black,
+  0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
 $form-range-thumb-focus-box-shadow-width: 0.2rem; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg: color.$white !default;
 $form-range-thumb-disabled-bg: $form-range-thumb-bg !default;
@@ -121,10 +132,26 @@ $form-floating-label-scale: math.div(
   $form-floating-label-font-size
 );
 $form-floating-label-upscale: math.div(1, $form-floating-label-scale);
+$form-floating-label-padding-t: calc(
+  #{$input-border-width} + #{$form-floating-label-height * 0.5} - #{$form-floating-label-font-size *
+    type.$line-height-copy * 0.5}
+);
 $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
 $form-floating-label-transform: scale($form-floating-label-scale);
 $form-floating-transition: animation.$transition-base;
-$form-floating-transition-in: $form-floating-transition,
+$form-floating-transition-in:
+  $form-floating-transition,
   width 0ms list.nth(animation.$transition-base, 2);
-$form-floating-transition-out: $form-floating-transition, width 0ms linear;
+$form-floating-transition-out:
+  $form-floating-transition,
+  width 0ms linear;
 $form-floating-select-bg-size: 32px 32px;
+
+$form-floating-label-font-size-sm: type.$font-size-12;
+$form-floating-label-font-size-placeholder-sm: type.$font-size-14; // TODO: replace with input font-size after adjustment
+$form-floating-padding-x-sm: $input-padding-x-sm;
+$form-floating-padding-y-sm: $input-padding-y-sm;
+$form-floating-label-height-sm: $form-floating-input-height-inner-sm;
+$form-floating-label-padding-t-sm: calc(
+  #{$input-border-width} + #{$form-floating-label-height-sm * 0.5} - #{$form-floating-label-font-size-sm}
+);

package/variables/components/_stepper.scss

@@ -31,7 +31,4 @@ $stepper-link-current-font-weight: type.$font-weight-bold;
 
 // DEPRECATED
 $stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepper-indicator-color)}');
-$stepper-indicator-hover-check-icon: url('#{icon-fn.get-colored-svg-url(
-    '2105',
-    $stepper-indicator-hover-color
-)}');
+$stepper-indicator-hover-check-icon: url('#{icon-fn.get-colored-svg-url('2105',$stepper-indicator-hover-color)}');

package/schematics/migrations/_example-dom-migration/index.d.ts

@@ -1,2 +0,0 @@
-import { Rule } from '@angular-devkit/schematics';
-export default function (): Rule;

package/schematics/migrations/_example-dom-migration/index.js

@@ -1,131 +0,0 @@
-"use strict";
-/*
- * This is a dom-migration example
- *
- * You can write more than just one update in a migration schematic
- * by defining multiple DomUpdates and pass them all to the DomMigration Class.
- *
- * Important note:
- * The order of the DomUpdates is important, because updates are additive.
- * This means, every update you register will receive the updated DOM from
- * the previous update, and can now make it's own changes.
- *
- * We use cheerio thogether with htmlparser2 under the hood which makes it possible
- * to write updates by defining only two simple parameters:
- *
- * selector: string
- * This is the jQuery like selector which is used to find the elements to be updated.
- *
- * update: Function
- * This is the update function, which receives the cheerio-element as the first argument
- * and the cheerio-instance as the second.
- * On cheerio-elements you can directly run jQuery like functions to mutate them.
- * The cheerio-instance is sometimes helpfull, for example to convert elements in loops
- * into a new cheerio-element:
- * $elements.filter((i, element) => $(element).hasClass('bla')).addClass('bla-2');
- *
- * Note:
- * It is not possible to remove the selected elements itself.
- * Instead you can select the parent elements and then search the elements to remove
- * and call the remove function on this elements directly.
- * See RemoveElementUpdate example.
- *
- * To try this example, you must add it as a schematic in your collection.json file
- * and you need to add the following code somewhere in your html that should get updated:
- *
- * <div id="example-dom-element"></div>
- *
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const dom_migration_1 = require("../../utils/dom-migration");
-function default_1() {
-    return (0, dom_migration_1.getDomMigrationRule)(new AddElementUpdate, new AddClassUpdate, new AddAttributeUpdate, new AddTextUpdate, new RemoveElementUpdate, new WrapElementUpdate, new ReplaceWithElementUpdate);
-}
-exports.default = default_1;
-class AddElementUpdate {
-    constructor() {
-        this.selector = '.example-dom-element';
-        this.update = function ($elements) {
-            $elements.append('<span>It\'s working...</span>');
-        };
-    }
-}
-class AddClassUpdate {
-    constructor() {
-        this.selector = '.example-dom-element';
-        this.update = function ($elements, $) {
-            $elements
-                .each((i, element) => {
-                if (i === 1) {
-                    $(element).addClass('remove');
-                }
-                if (i === 2) {
-                    $(element).addClass('wrap');
-                }
-                if (i === 3) {
-                    $(element).addClass('replace-with');
-                }
-            });
-        };
-    }
-}
-class AddAttributeUpdate {
-    constructor() {
-        this.selector = '.example-dom-element > span';
-        this.update = function ($elements) {
-            $elements.attr('style', 'padding: 10px; background-color: white;');
-        };
-    }
-}
-class AddTextUpdate {
-    constructor() {
-        this.selector = '.example-dom-element > span';
-        this.update = function ($elements, $) {
-            $elements
-                .each((_i, element) => {
-                const $element = $(element);
-                $element.text(`${$element.text()} cheerio!`);
-            });
-        };
-    }
-}
-class RemoveElementUpdate {
-    constructor() {
-        this.selector = '.example-dom-element.remove';
-        this.update = function ($elements) {
-            $elements.remove();
-        };
-    }
-}
-class WrapElementUpdate {
-    constructor() {
-        this.selector = '.example-dom-element.wrap';
-        this.update = function ($elements, $) {
-            $elements
-                .each((_i, element) => {
-                const $element = $(element);
-                // to let the update work correctly you need to copy the data from the sourceElement to the distElement
-                // how to do this depends on the return value of the migration function used on the sourceElement
-                const $wrapper = $('<div class="example-dom-element-wrapper"></div>').data($element.data());
-                $element.wrap($wrapper);
-            });
-        };
-    }
-}
-class ReplaceWithElementUpdate {
-    constructor() {
-        this.selector = '.example-dom-element.replace-with';
-        this.update = function ($elements, $) {
-            $elements
-                .each((_i, element) => {
-                const $element = $(element);
-                // to let the update work correctly you need to copy the data from the sourceElement to the distElement
-                // how to do this depends on the return value of the migration function used on the sourceElement
-                const $replacement = $(`<div class="example-dom-element-wrapper">${$element.prop('outerHTML')}</div>`)
-                    .data($element.data());
-                $element.replaceWith($replacement);
-            });
-        };
-    }
-}
-//# sourceMappingURL=index.js.map

package/schematics/migrations/_example-dom-migration/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../schematics/migrations/_example-dom-migration/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;;AAIH,6DAA2E;AAE3E;IACE,OAAO,IAAA,mCAAmB,EACxB,IAAI,gBAAgB,EACpB,IAAI,cAAc,EAClB,IAAI,kBAAkB,EACtB,IAAI,aAAa,EACjB,IAAI,mBAAmB,EACvB,IAAI,iBAAiB,EACrB,IAAI,wBAAwB,CAC7B,CAAC;AACJ,CAAC;AAVD,4BAUC;AAED,MAAM,gBAAgB;IAAtB;QACE,aAAQ,GAAG,sBAAsB,CAAC;QAClC,WAAM,GAAG,UAAU,SAA2B;YAC5C,SAAS,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC;CAAA;AAED,MAAM,cAAc;IAApB;QACE,aAAQ,GAAG,sBAAsB,CAAC;QAClC,WAAM,GAAG,UAAU,SAA2B,EAAE,CAAa;YAC3D,SAAS;iBACN,IAAI,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE;gBACnB,IAAI,CAAC,KAAK,CAAC,EAAE;oBACX,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;iBAC/B;gBACD,IAAI,CAAC,KAAK,CAAC,EAAE;oBACX,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;iBAC7B;gBACD,IAAI,CAAC,KAAK,CAAC,EAAE;oBACX,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;iBACrC;YACH,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;IACJ,CAAC;CAAA;AAED,MAAM,kBAAkB;IAAxB;QACE,aAAQ,GAAG,6BAA6B,CAAC;QACzC,WAAM,GAAG,UAAU,SAA2B;YAC5C,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,yCAAyC,CAAC,CAAC;QACrE,CAAC,CAAC;IACJ,CAAC;CAAA;AAED,MAAM,aAAa;IAAnB;QACE,aAAQ,GAAG,6BAA6B,CAAC;QACzC,WAAM,GAAG,UAAU,SAA2B,EAAE,CAAa;YAC3D,SAAS;iBACN,IAAI,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;gBACpB,MAAM,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;gBAE5B,QAAQ,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;YAC/C,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;IACJ,CAAC;CAAA;AAED,MAAM,mBAAmB;IAAzB;QACE,aAAQ,GAAG,6BAA6B,CAAC;QACzC,WAAM,GAAG,UAAU,SAA2B;YAC5C,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC;CAAA;AAED,MAAM,iBAAiB;IAAvB;QACE,aAAQ,GAAG,2BAA2B,CAAC;QACvC,WAAM,GAAG,UAAU,SAA2B,EAAE,CAAa;YAC3D,SAAS;iBACN,IAAI,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;gBACpB,MAAM,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;gBAC5B,uGAAuG;gBACvG,iGAAiG;gBACjG,MAAM,QAAQ,GAAG,CAAC,CAAC,iDAAiD,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;gBAE5F,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC1B,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;IACJ,CAAC;CAAA;AAED,MAAM,wBAAwB;IAA9B;QACE,aAAQ,GAAG,mCAAmC,CAAC;QAC/C,WAAM,GAAG,UAAU,SAA2B,EAAE,CAAa;YAC3D,SAAS;iBACN,IAAI,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;gBACpB,MAAM,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;gBAC5B,uGAAuG;gBACvG,iGAAiG;gBACjG,MAAM,YAAY,GAAG,CAAC,CAAC,4CAA4C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;qBACnG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;gBAEzB,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YACrC,CAAC,CAAC,CAAC;QACP,CAAC,CAAA;IACH,CAAC;CAAA"}

package/schematics/migrations/bootstrap/badge/index.d.ts

@@ -1,2 +0,0 @@
-import { Rule } from '@angular-devkit/schematics';
-export default function (): Rule;

package/schematics/migrations/bootstrap/badge/index.js

@@ -1,85 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const constants_1 = require("../../../utils/constants");
-const dom_migration_1 = require("../../../utils/dom-migration");
-function default_1() {
-    return (0, dom_migration_1.getDomMigrationRule)(new BadgePillClassUpdate, new BadgeBGClassUpdate, new BadgeOutlineClassUpdate, new BadgeCararraClassUpdate, new BadgeCararraThickClassUpdate);
-}
-exports.default = default_1;
-class BadgePillClassUpdate {
-    constructor() {
-        this.selector = '.badge-pill';
-    }
-    update($elements) {
-        $elements
-            .removeClass('badge-pill')
-            .addClass('rounded-pill');
-    }
-}
-class BadgeBGClassUpdate {
-    constructor() {
-        this.cssClassRegex = new RegExp(`^badge-(${constants_1.themeColors.join('|')})$`);
-        this.selector = constants_1.themeColors.map(colorname => `.badge-${colorname}`).join(', ');
-    }
-    update($elements, $) {
-        $elements
-            .each((_i, element) => {
-            var _a;
-            const $element = $(element);
-            (_a = $element
-                .attr('class')) === null || _a === void 0 ? void 0 : _a.split(' ').forEach(cssClass => {
-                const match = cssClass.match(this.cssClassRegex);
-                if (match) {
-                    const colorname = match[1];
-                    $element
-                        .removeClass(cssClass)
-                        .addClass(`bg-${colorname}`);
-                }
-            });
-        });
-    }
-}
-class BadgeOutlineClassUpdate {
-    constructor() {
-        this.cssClassRegex = new RegExp(`^badge-outline-(${constants_1.themeColors.join('|')})$`);
-        this.selector = constants_1.themeColors.map(colorname => `.badge-outline-${colorname}`).join(', ');
-    }
-    update($elements, $) {
-        $elements
-            .each((_i, element) => {
-            var _a;
-            const $element = $(element);
-            (_a = $element
-                .attr('class')) === null || _a === void 0 ? void 0 : _a.split(' ').forEach(cssClass => {
-                const match = cssClass.match(this.cssClassRegex);
-                if (match) {
-                    const colorname = match[1];
-                    $element
-                        .removeClass(cssClass)
-                        .addClass(`border-${colorname}`);
-                }
-            });
-        });
-    }
-}
-class BadgeCararraClassUpdate {
-    constructor() {
-        this.selector = '.badge-gray-cararra';
-    }
-    update($elements) {
-        $elements
-            .removeClass('badge-gray-cararra')
-            .addClass('bg-light');
-    }
-}
-class BadgeCararraThickClassUpdate {
-    constructor() {
-        this.selector = '.badge-outline-gray-cararra-thick';
-    }
-    update($elements) {
-        $elements
-            .removeClass('badge-outline-gray-cararra-thick')
-            .addClass('border-light border-2');
-    }
-}
-//# sourceMappingURL=index.js.map