@gov-design-system-ce/components 0.0.12 → 0.0.14

package/dist/collection/components/gov-form/search/gov-form-search.css

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Search
 */
@@ -230,10 +249,10 @@
 }
 .gov-form-search__input input {
   height: auto;
-  border-width: 0;
+  border-width: 0 !important;
 }
-.gov-form-search__input input:focus {
-  outline: none;
+.gov-form-search__input input:focus-visible {
+  outline: none !important;
 }
 .gov-form-search__button {
   flex: 0 0 auto;

package/dist/collection/components/gov-form/select/gov-form-select.css

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Select
 */

package/dist/collection/components/gov-form/switch/gov-form-switch.css

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Switch
 */

package/dist/collection/components/gov-grid/gov-grid-item.css

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Grid Cell
 */

package/dist/collection/components/gov-grid/gov-grid.css

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Grid
 */

package/dist/collection/components/gov-icon/gov-icon.css

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Icon
 */

package/dist/collection/components/gov-layout/gov-layout-column.css

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Layout column
 */

package/dist/collection/components/gov-layout/gov-layout.css

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Layout
 */

package/dist/collection/components/gov-loading/loading/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-loading/loading/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,OAAO,EAAE,sBAAsB;EAC/B,IAAI,EAAE,mBAAmB;CACzB,CAAA","sourcesContent":["export const LoadingClass = {\n\troot: 'gov-loading',\n\tcontent: 'gov-loading__content',\n\ticon: 'gov-loading__icon',\n}\n"]}

package/dist/collection/components/gov-loading/{gov-loading.css → loading/gov-loading.css}

@@ -199,6 +199,25 @@
     transform: scaleX(0);
   }
 }
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /*
 *   Loading
 */

package/dist/collection/components/gov-loading/{gov-loading.js → loading/gov-loading.js}

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 import { LoadingClass } from './constants';
-import { govHost, prepareClasses } from '../../helpers/Dom/template';
+import { govHost, prepareClasses } from '../../../helpers/Dom/template';
 export class GovLoading {
   constructor() {
     this.loading = false;

package/dist/collection/components/gov-loading/loading/gov-loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-loading.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-loading/loading/gov-loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAOvE,MAAM,OAAO,UAAU;EAGtB;mBAQkB,KAAK;IAPtB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAQD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MACpE,WAAK,KAAK,EAAE,YAAY,CAAC,OAAO;QAC/B,gBAAU,KAAK,EAAE,cAAc,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,EAAE,IAAI,EAAC,QAAQ,GAAY;QACrG,eAAQ,CACH;MACN,oBAAc,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,GAAI,CAChD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { LoadingClass } from './constants'\nimport { govHost, prepareClasses } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-loading',\n\tstyleUrl: 'gov-loading.scss',\n})\nexport class GovLoading {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovLoadingElement\n\t/**\n\t * Determine if loading is active\n\t */\n\t@Prop() loading = false\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(LoadingClass.root)} loading={this.loading}>\n\t\t\t\t<div class={LoadingClass.content}>\n\t\t\t\t\t<gov-icon class={prepareClasses([LoadingClass.icon, 'gov-spin-animation'])} name=\"loader\"></gov-icon>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t<gov-backdrop visible={this.loading} inverse={true} />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-loading/skeleton/constants.js

@@ -0,0 +1,20 @@
+import { pick } from "../../../utils/utils";
+import { Variants } from "../../../core/constants/variants";
+export const SkeletonVariants = pick(Variants, ["PRIMARY", "SECONDARY", "SUCCESS", "ERROR", "WARNING"]);
+export var SkeletonShapes;
+(function (SkeletonShapes) {
+  SkeletonShapes["CIRCLE"] = "circle";
+  SkeletonShapes["REACT"] = "rect";
+  SkeletonShapes["TEXT"] = "text";
+})(SkeletonShapes || (SkeletonShapes = {}));
+export var SkeletonAnimation;
+(function (SkeletonAnimation) {
+  SkeletonAnimation["PULSE"] = "pulse";
+  SkeletonAnimation["PROGRESS"] = "progress";
+  SkeletonAnimation["FALSE"] = "false";
+})(SkeletonAnimation || (SkeletonAnimation = {}));
+export const SkeletonClass = {
+  root: 'gov-skeleton',
+  loader: 'gov-skeleton__loader',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-loading/skeleton/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-loading/skeleton/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAA;AAG3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAGvG,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;EACzB,mCAAiB,CAAA;EACjB,gCAAc,CAAA;EACd,+BAAa,CAAA;AACd,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB;AAGD,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;EAC5B,oCAAe,CAAA;EACf,0CAAqB,CAAA;EACrB,oCAAe,CAAA;AAChB,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAGD,MAAM,CAAC,MAAM,aAAa,GAAG;EAC5B,IAAI,EAAE,cAAc;EACpB,MAAM,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import { pick } from \"../../../utils/utils\"\nimport { Variants } from \"../../../core/constants/variants\"\nimport { ValueOf } from \"../../../types/interfaces\"\n\nexport const SkeletonVariants = pick(Variants, [\"PRIMARY\", \"SECONDARY\", \"SUCCESS\", \"ERROR\", \"WARNING\"])\nexport type SkeletonVariantsType = `${ValueOf<typeof SkeletonVariants>}`\n\nexport enum SkeletonShapes {\n\tCIRCLE = 'circle',\n\tREACT = 'rect',\n\tTEXT = 'text'\n}\nexport type SkeletonShapesType = `${ValueOf<typeof SkeletonShapes>}`\n\nexport enum SkeletonAnimation {\n\tPULSE = 'pulse',\n\tPROGRESS = 'progress',\n\tFALSE = 'false'\n}\nexport type SkeletonAnimationType = `${ValueOf<typeof SkeletonAnimation>}`\n\nexport const SkeletonClass = {\n\troot: 'gov-skeleton',\n\tloader: 'gov-skeleton__loader',\n}\n"]}

package/dist/collection/components/gov-loading/skeleton/gov-skeleton.css

@@ -0,0 +1,290 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Breadcrumbs
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Tiles
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -  Variables - Loading
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form password power
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -  Variables - Form group
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Side nav
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.gov-skeleton__loader {
+  position: relative;
+  display: inline-block;
+  width: var(--gov-skeleton-width, 100%);
+  height: var(--gov-skeleton-height, 20px);
+  margin-bottom: var(--gov-skeleton-margin-bottom, 8px);
+  border-radius: var(--gov-skeleton-border-radius, var(--gov-border-radius, 0.1875rem));
+  outline: none;
+  overflow: hidden;
+  box-sizing: border-box;
+  will-change: transform;
+}
+.gov-skeleton__loader.circle {
+  width: var(--gov-skeleton-circle-size, 60px);
+  height: var(--gov-skeleton-circle-size, 60px);
+  margin-bottom: var(--gov-skeleton-margin-bottom, 8px);
+  border-radius: var(--gov-skeleton-circle-radius, 50%);
+}
+.gov-skeleton__loader.rect {
+  border-radius: var(--gov-skeleton-rect-radius, 0);
+}
+.gov-skeleton__loader.progress {
+  background-size: 200px 100%;
+  animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+.gov-skeleton__loader.pulse {
+  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  animation-delay: 0.5s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .gov-skeleton__loader.pulse, .gov-skeleton__loader.progress {
+    background-image: none;
+    animation: none;
+  }
+}
+.gov-skeleton[variant=warning] .gov-skeleton__loader {
+  background-color: var(--gov-skeleton-warning-background, var(--gov-color-warning-100));
+  background-repeat: no-repeat;
+}
+.gov-skeleton[variant=warning] .gov-skeleton__loader.progress {
+  background-image: linear-gradient(90deg, var(--gov-skeleton-warning-background, var(--gov-color-warning-100)), var(--gov-skeleton-warning-foreground, var(--gov-color-warning-200)), var(--gov-skeleton-warning-background, var(--gov-color-warning-100)));
+}
+.gov-skeleton[variant=error] .gov-skeleton__loader {
+  background-color: var(--gov-skeleton-error-background, var(--gov-color-error-100));
+  background-repeat: no-repeat;
+}
+.gov-skeleton[variant=error] .gov-skeleton__loader.progress {
+  background-image: linear-gradient(90deg, var(--gov-skeleton-error-background, var(--gov-color-error-100)), var(--gov-skeleton-error-foreground, var(--gov-color-error-200)), var(--gov-skeleton-error-background, var(--gov-color-error-100)));
+}
+.gov-skeleton[variant=secondary] .gov-skeleton__loader {
+  background-color: var(--gov-skeleton-secondary-background, var(--gov-color-secondary-300));
+  background-repeat: no-repeat;
+}
+.gov-skeleton[variant=secondary] .gov-skeleton__loader.progress {
+  background-image: linear-gradient(90deg, var(--gov-skeleton-secondary-background, var(--gov-color-secondary-300)), var(--gov-skeleton-secondary-foreground, var(--gov-color-secondary-100)), var(--gov-skeleton-secondary-background, var(--gov-color-secondary-300)));
+}
+.gov-skeleton[variant=success] .gov-skeleton__loader {
+  background-color: var(--gov-skeleton-success-background, var(--gov-color-success-100));
+  background-repeat: no-repeat;
+}
+.gov-skeleton[variant=success] .gov-skeleton__loader.progress {
+  background-image: linear-gradient(90deg, var(--gov-skeleton-success-background, var(--gov-color-success-100)), var(--gov-skeleton-success-foreground, var(--gov-color-success-200)), var(--gov-skeleton-success-background, var(--gov-color-success-100)));
+}
+.gov-skeleton[variant=primary] .gov-skeleton__loader {
+  background-color: var(--gov-skeleton-primary-background, var(--gov-color-primary-100));
+  background-repeat: no-repeat;
+}
+.gov-skeleton[variant=primary] .gov-skeleton__loader.progress {
+  background-image: linear-gradient(90deg, var(--gov-skeleton-primary-background, var(--gov-color-primary-100)), var(--gov-skeleton-primary-foreground, var(--gov-color-primary-200)), var(--gov-skeleton-primary-background, var(--gov-color-primary-100)));
+}