@govbr-ds/webcomponents 2.0.0-next.22 → 2.0.0-next.24

package/dist/collection/components/list/list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Host, Prop, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/list?tab=designer).\n *\n * @slot default - Slot padrão para inclusão dos itens da lista.\n * @slot header - Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo).\n */\n@Component({\n  tag: 'br-list',\n  styleUrl: 'list.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class List {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrListElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o cabeçalho para a lista.\n   */\n  @Prop({ reflect: true }) header: string\n\n  /**\n   * Indica se a lista será horizontal. Por padrão, a lista é vertical.\n   */\n  @Prop({ reflect: true }) isHorizontal: boolean = false\n\n  /**\n   * Indica que o divider para o título da lista estará oculto.\n   */\n  @Prop({ reflect: true }) hideHeaderDivider: boolean = false\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  componentDidLoad() {\n    if (this.isHorizontal) {\n      const slotItems = Array.from(this.el.querySelectorAll('br-item'))\n\n      slotItems.forEach((item) => {\n        const nextElement = item.nextElementSibling\n        if (nextElement?.classList.contains('br-divider')) {\n          const divider = nextElement as HTMLElement\n          divider.style.borderWidth = '0 1px 0 0'\n          divider.style.width = '1px'\n        }\n      })\n    }\n\n    const items = Array.from(this.el.querySelectorAll('br-item'))\n    items.forEach((item) => {\n      item.setAttribute('role', 'listitem')\n    })\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-list': true,\n      horizontal: this.isHorizontal,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n  private readonly renderHeader = () => {\n    if (this.header?.length > 0 || this.hasSlotContent('header')) {\n      return (\n        <div class=\"header\">\n          {this.header && <div class=\"title\">{this.header}</div>}\n          {this.hasSlotContent('header') && (\n            <div class=\"d-flex\">\n              <slot name=\"header\"></slot>\n            </div>\n          )}\n        </div>\n      )\n    }\n    return null\n  }\n\n  private renderDivider() {\n    if ((this.header || this.hasSlotContent('header')) && !this.hideHeaderDivider) {\n      return <div class=\"br-divider\"></div>\n    }\n    return null\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"list\">\n          {this.renderHeader()}\n          {this.renderDivider()}\n          <slot></slot>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/loading/loading.css

@@ -1,661 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  line-height: var(--font-line-height-medium);
-  -webkit-text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-          text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-}
-
-a {
-  background-color: transparent;
-}
-
-
-strong {
-  font-weight: bolder;
-}
-
-small {
-  font-size: 80%;
-}
-
-img {
-  border-style: none;
-}
-
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: var(--font-line-height-medium);
-  margin: 0;
-}
-
-button,
-input {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
-     -moz-appearance: button;
-          appearance: button;
-}
-
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-textarea {
-  overflow: auto;
-}
-
-[type=checkbox],
-[type=radio] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type=search] {
-  -webkit-appearance: textfield;
-     -moz-appearance: textfield;
-          appearance: textfield;
-  outline-offset: -2px;
-}
-
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
-          appearance: none;
-}
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-          appearance: button;
-  font: inherit;
-}
-
-[hidden] {
-  display: none;
-}
-
-.d-flex {
-  display: flex !important;
-}
-
-.align-items-center {
-  align-items: center !important;
-}
-.col,
-[class*=col-] {
-  padding-left: calc(var(--grid-gutter) * 0.5);
-  padding-right: calc(var(--grid-gutter) * 0.5);
-  width: 100%;
-}
-
-.col {
-  flex: 1 0 0%;
-  min-width: 8.3333333333%;
-}
-
-.col-auto {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-.container {
-  --grid-margin: var(--grid-portrait-margin);
-  --grid-maxwidth: var(--grid-portrait-maxwidth);
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--grid-maxwidth);
-  padding-left: var(--grid-margin);
-  padding-right: var(--grid-margin);
-  width: 100%;
-}
-
-.row {
-  --grid-gutter: var(--grid-portrait-gutter);
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: calc(var(--grid-gutter) * -0.5);
-  margin-right: calc(var(--grid-gutter) * -0.5);
-}
-
-@media (min-width: 576px) {
-  .container {
-    --grid-margin: var(--grid-tablet-margin);
-  }
-  .row {
-    --grid-gutter: var(--grid-tablet-gutter);
-  }
-  .container {
-    --grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
-  }
-}
-@media (min-width: 992px) {
-  .container {
-    --grid-margin: var(--grid-tablet-margin);
-  }
-  .row {
-    --grid-gutter: var(--grid-tablet-gutter);
-  }
-  .container {
-    --grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
-  }
-}
-@media (min-width: 1280px) {
-  .container {
-    --grid-margin: var(--grid-desktop-margin);
-  }
-  .row {
-    --grid-gutter: var(--grid-desktop-gutter);
-  }
-  .container {
-    --grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
-  }
-}
-@media (min-width: 1600px) {
-  .container {
-    --grid-margin: var(--grid-tv-margin);
-  }
-  .row {
-    --grid-gutter: var(--grid-tv-gutter);
-  }
-  .container {
-    --grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
-  }
-}
-
-.mt-1 {
-  margin-top: var(--spacing-scale-half) !important;
-}
-
-.mr-1 {
-  margin-right: var(--spacing-scale-half) !important;
-}
-
-.mb-1 {
-  margin-bottom: var(--spacing-scale-half) !important;
-}
-
-.mr-2 {
-  margin-right: var(--spacing-scale-base) !important;
-}
-
-.mr-n2 {
-  margin-right: calc(var(--spacing-scale-base) * -1) !important;
-}
-
-.ml-2 {
-  margin-left: var(--spacing-scale-base) !important;
-}
-
-.mb-3 {
-  margin-bottom: var(--spacing-scale-2x) !important;
-}
-
-.mr-auto {
-  margin-right: auto !important;
-}
-
-.pt-half {
-  padding-top: var(--spacing-scale-half) !important;
-}
-
-.py-3 {
-  padding-bottom: var(--spacing-scale-2x) !important;
-  padding-top: var(--spacing-scale-2x) !important;
-}
-
-.py-4 {
-  padding-bottom: var(--spacing-scale-3x) !important;
-  padding-top: var(--spacing-scale-3x) !important;
-}
-body {
-  --bg-color: var(--background);
-  --bg-color-rgb: var(--background-rgb);
-  --bg-color-hsl: var(--background-hsl);
-  --font-size: var(--font-size-scale-base);
-  --font-weight: var(--font-weight-regular);
-  --link-color: var(--interactive);
-  --link-color-rgb: var(--interactive-rgb);
-  --link-color-hsl: var(--interactive-hsl);
-  --line-height: var(--font-line-height-medium);
-  --text-color: var(--color);
-  --text-color-rgb: var(--color-rgb);
-  --text-color-hsl: var(--color-hsl);
-  background: var(--bg-color);
-  color: var(--text-color);
-  font-family: var(--font-family-base);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-}
-
-p {
-  color: var(--color);
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--font-line-height-medium);
-  margin-bottom: var(--spacing-scale-2x);
-  margin-top: 0;
-}
-p a {
-  text-decoration: underline;
-}
-
-@media (min-width: 576px) {
-  p {
-    font-size: var(--font-size-scale-up-01);
-  }
-}
-a {
-  --focus-offset: var(--spacing-scale-half);
-  color: var(--interactive);
-  text-decoration: none;
-}
-a:focus {
-  outline: none;
-}
- a:focus-visible {
-  outline-color: var(--focus);
-  outline-offset: var(--focus-offset);
-  outline-style: var(--focus-style);
-  outline-width: var(--focus-width);
-}
-a:not(:disabled):hover {
-  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
-}
-a:not(:disabled):active {
-  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
-}
-
-button {
-  cursor: pointer;
-}
-
-img {
-  max-width: 100%;
-  vertical-align: middle;
-}
-ul {
-  margin-bottom: var(--spacing-scale-2x);
-  margin-top: 0;
-  padding: 0 0 0 var(--spacing-scale-5x);
-}
-
-label,
-.label {
-  color: var(--color);
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--font-line-height-medium);
-  margin-bottom: var(--spacing-scale-half);
-}
-
-::-moz-placeholder {
-  color: var(--color-light);
-  font-size: var(--font-size-scale-base);
-  font-style: italic;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--font-line-height-medium);
-  margin-bottom: var(--spacing-scale-half);
-  margin-top: var(--spacing-scale-half);
-  opacity: 1;
-}
-
-::placeholder,
-.placeholder {
-  color: var(--color-light);
-  font-size: var(--font-size-scale-base);
-  font-style: italic;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--font-line-height-medium);
-  margin-bottom: var(--spacing-scale-half);
-  margin-top: var(--spacing-scale-half);
-  opacity: 1;
-}
-
-input,
-textarea,
-.input {
-  color: var(--color-light);
-  font-size: var(--font-size-scale-up-01);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  margin-bottom: var(--spacing-scale-half);
-}
-
-.text-pure-0 {
-  color: var(--pure-0) !important;
-}
-
-.text-primary-default {
-  color: var(--color-primary-default) !important;
-}
-
-.bg-support-01 {
-  --color: var(--color-dark);
-  --color-rgb: var(--color-dark-rgb);
-  --text-color: var(--color-dark);
-  --interactive: var(--interactive-dark);
-  --interactive-rgb: var(--interactive-dark-rgb);
-  --visited: var(--visited-dark);
-  --hover: var(--hover-dark);
-  --pressed: var(--pressed-dark);
-  --focus-color: var(--focus-color-dark);
-  --focus: var(--focus-color-dark);
-  background: var(--color-support-01) !important;
-}
-
-.text-nowrap {
-  white-space: nowrap !important;
-}
-
-.text-base {
-  font-size: var(--font-size-scale-base) !important;
-}
-
-.highlight {
-  background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
-  color: var(--status-highlight-text);
-  padding: 0 var(--spacing-scale-half);
-}
-
-[disabled],
-.disabled {
-  cursor: not-allowed;
-  opacity: var(--disabled);
-}
-[disabled] *,
-.disabled * {
-  pointer-events: none;
-}
-
-[data-toggle=dropdown] + * {
-  position: absolute;
-}
-
-.dropdown {
-  position: relative;
-}
-.dropdown [data-toggle=dropdown] + * {
-  box-shadow: var(--surface-shadow-sm);
-  left: 0;
-  position: absolute;
-  top: 100%;
-}
-.dropdown .br-item {
-  --color: var(--color-light);
-  --color-rgb: var(--color-light-rgb);
-  --text-color: var(--color-light);
-  --interactive: var(--interactive-light);
-  --interactive-rgb: var(--color-rgb);
-  --visited: var(--visited-light);
-  --hover: var(--hover-light);
-  --pressed: var(--pressed-light);
-  --focus-color: var(--focus-color-light);
-  --focus: var(--focus-color-light);
-  --item-padding-y: var(--spacing-scale-2x);
-  background-color: var(--background-light);
-  color: var(--color);
-}
-.dropdown .br-item:not(:last-child) {
-  border-bottom: 1px solid var(--border-color);
-}
-.dropdown .br-item.selected {
-  --color: var(--color-dark);
-  --color-rgb: var(--color-dark-rgb);
-  --text-color: var(--color-dark);
-  --interactive: var(--interactive-dark);
-  --interactive-rgb: var(--interactive-dark-rgb);
-  --visited: var(--visited-dark);
-  --hover: var(--hover-dark);
-  --pressed: var(--pressed-dark);
-  --focus-color: var(--focus-color-dark);
-  --focus: var(--focus-color-dark);
-}
-
-.loading,
-.br-loading {
-  --loading-size: var(--loading-indetermined-diameter-sm);
-  --loading-diameter: 84px;
-  --loading-stroke: 5px;
-  --loading-indetermined-color: var(--interactive);
-  --loading-indetermined-diameter-md: 44px;
-  --loading-indetermined-diameter-sm: 24px;
-  position: relative;
-  z-index: var(--z-index-layer-4);
-}
-.loading[data-progress]:not(:empty),
-.br-loading[data-progress]:not(:empty) {
-  background-color: var(--border-color);
-  border-radius: 50%;
-}
-.loading[data-progress]:not(:empty)::before,
-.br-loading[data-progress]:not(:empty)::before {
-  content: none;
-}
-.loading[data-progress]::after,
-.br-loading[data-progress]::after {
-  --loading-size: calc(var(--loading-diameter) - var(--loading-stroke) * 2);
-  background: var(--background);
-  border-radius: 50%;
-  color: var(--interactive);
-  content: attr(data-progress) "%";
-  font-size: var(--font-size-scale-up-02);
-  font-weight: var(--font-weight-semi-bold);
-  height: var(--loading-size);
-  line-height: var(--loading-size);
-  margin: var(--loading-stroke);
-  position: absolute;
-  text-align: center;
-  width: var(--loading-size);
-}
-
-.loading[data-progress] .br-loading-mask,
-.loading[data-progress] .br-loading-fill,
-.br-loading[data-progress] .br-loading-mask,
-.br-loading[data-progress] .br-loading-fill {
-  backface-visibility: hidden;
-  border-radius: 50%;
-  clip: rect(0, var(--loading-diameter), var(--loading-diameter), calc(var(--loading-diameter) * 0.5));
-  height: var(--loading-diameter);
-  overflow: hidden;
-  position: absolute;
-  width: var(--loading-diameter);
-}
-
-.loading[data-progress] .br-loading-fill,
-.br-loading[data-progress] .br-loading-fill {
-  background: var(--interactive);
-  clip: rect(0, calc(var(--loading-diameter) * 0.5), var(--loading-diameter), 0);
-}
-.loading::before,
-.br-loading::before {
-  animation: spinAround 1.3s infinite linear;
-  border: 2px solid var(--loading-indetermined-color);
-  border-radius: 50%;
-  border-right-color: transparent;
-  content: "";
-  display: block;
-  height: var(--loading-size);
-  left: calc(50% - var(--loading-size) * 0.5);
-  position: absolute;
-  top: calc(50% - var(--loading-size) * 0.5);
-  width: var(--loading-size);
-}
-.loading:not(.br-button),
-.br-loading:not(.br-button) {
-  height: var(--loading-size);
-  width: var(--loading-size);
-}
-.loading:not(.br-button).medium,
-.br-loading:not(.br-button).medium {
-  --loading-size: var(--loading-indetermined-diameter-md);
-}
-.loading:not(.br-button).medium::before,
-.br-loading:not(.br-button).medium::before {
-  border-width: 4px;
-}
-.loading:not(.br-button)[data-progress],
-.br-loading:not(.br-button)[data-progress] {
-  --loading-size: var(--loading-diameter);
-}
-.loading:not(.br-button)[data-progress]::before,
-.br-loading:not(.br-button)[data-progress]::before {
-  border-width: var(--loading-stroke);
-}
-.loading[data-progress="1"] .br-loading-mask.full,
-.loading[data-progress="1"] .br-loading-fill,
-.br-loading[data-progress="1"] .br-loading-mask.full,
-.br-loading[data-progress="1"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(1.8deg);
-}
-.loading[data-progress="2"] .br-loading-mask.full,
-.loading[data-progress="2"] .br-loading-fill,
-.br-loading[data-progress="2"] .br-loading-mask.full,
-.br-loading[data-progress="2"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(3.6deg);
-}
-.loading[data-progress="3"] .br-loading-mask.full,
-.loading[data-progress="3"] .br-loading-fill,
-.br-loading[data-progress="3"] .br-loading-mask.full,
-.br-loading[data-progress="3"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(5.4deg);
-}
-.loading[data-progress="5"] .br-loading-mask.full,
-.loading[data-progress="5"] .br-loading-fill,
-.br-loading[data-progress="5"] .br-loading-mask.full,
-.br-loading[data-progress="5"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(9deg);
-}
-.loading[data-progress="10"] .br-loading-mask.full,
-.loading[data-progress="10"] .br-loading-fill,
-.br-loading[data-progress="10"] .br-loading-mask.full,
-.br-loading[data-progress="10"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(18deg);
-}
-.loading[data-progress="16"] .br-loading-mask.full,
-.loading[data-progress="16"] .br-loading-fill,
-.br-loading[data-progress="16"] .br-loading-mask.full,
-.br-loading[data-progress="16"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(28.8deg);
-}
-.loading[data-progress="20"] .br-loading-mask.full,
-.loading[data-progress="20"] .br-loading-fill,
-.br-loading[data-progress="20"] .br-loading-mask.full,
-.br-loading[data-progress="20"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(36deg);
-}
-.loading[data-progress="24"] .br-loading-mask.full,
-.loading[data-progress="24"] .br-loading-fill,
-.br-loading[data-progress="24"] .br-loading-mask.full,
-.br-loading[data-progress="24"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(43.2deg);
-}
-.loading[data-progress="48"] .br-loading-mask.full,
-.loading[data-progress="48"] .br-loading-fill,
-.br-loading[data-progress="48"] .br-loading-mask.full,
-.br-loading[data-progress="48"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(86.4deg);
-}
-.loading[data-progress="50"] .br-loading-mask.full,
-.loading[data-progress="50"] .br-loading-fill,
-.br-loading[data-progress="50"] .br-loading-mask.full,
-.br-loading[data-progress="50"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(90deg);
-}
-.loading[data-progress="70"] .br-loading-mask.full,
-.loading[data-progress="70"] .br-loading-fill,
-.br-loading[data-progress="70"] .br-loading-mask.full,
-.br-loading[data-progress="70"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(126deg);
-}
-.loading[data-progress="72"] .br-loading-mask.full,
-.loading[data-progress="72"] .br-loading-fill,
-.br-loading[data-progress="72"] .br-loading-mask.full,
-.br-loading[data-progress="72"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(129.6deg);
-}
-.loading[data-progress="100"] .br-loading-mask.full,
-.loading[data-progress="100"] .br-loading-fill,
-.br-loading[data-progress="100"] .br-loading-mask.full,
-.br-loading[data-progress="100"] .br-loading-fill {
-  animation: fill ease-in-out 2s;
-  transform: rotate(180deg);
-}
-@keyframes spinAround {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-@keyframes fill {
-  0% {
-    transform: rotate(0deg);
-  }
-}
-
-:host {
-  display: block;
-}
-:host .loading-progress-alignment {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-}