@1024pix/pix-ui 58.4.2 → 58.4.4

package/addon/components/pix-button.hbs

@@ -1,25 +0,0 @@
-<button
-  type={{this.type}}
-  class={{this.className}}
-  {{on "click" this.triggerAction}}
-  aria-disabled="{{this.isDisabled}}"
-  ...attributes
->
-  {{#if this.isLoading}}
-    <div class="loader loader--{{this.loadingColor}}">
-      <div class="bounce1"></div>
-      <div class="bounce2"></div>
-      <div class="bounce3"></div>
-    </div>
-    <span class="loader__not-visible-text">{{yield}}</span>
-  {{else}}
-    <PixButtonContent
-      @iconBefore={{@iconBefore}}
-      @iconAfter={{@iconAfter}}
-      @plainIconAfter={{@plainIconAfter}}
-      @plainIconBefore={{@plainIconBefore}}
-    >
-      {{yield}}
-    </PixButtonContent>
-  {{/if}}
-</button>

package/addon/components/pix-checkbox.hbs

@@ -1,37 +0,0 @@
-<div class="pix-checkbox {{@class}}">
-  <PixLabelWrapped
-    @for={{this.id}}
-    @requiredLabel={{@requiredLabel}}
-    @subLabel={{@subLabel}}
-    @size={{@size}}
-    @inlineLabel={{true}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @isDisabled={{this.isDisabled}}
-    @variant={{@variant}}
-    @state={{@state}}
-  >
-    <:inputElement>
-      <input
-        type="checkbox"
-        id={{this.id}}
-        class={{this.inputClasses}}
-        checked={{@checked}}
-        aria-disabled={{this.isDisabled}}
-        aria-describedby={{this.stateId}}
-        {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
-        ...attributes
-      />
-    </:inputElement>
-    <:default>
-      {{yield to="label"}}
-    </:default>
-  </PixLabelWrapped>
-
-  <span class="screen-reader-only" id={{this.stateId}}>
-    {{#if this.hasSuccessState}}
-      {{this.stateSuccessMessage}}
-    {{else if this.hasErrorState}}
-      {{this.stateErrorMessage}}
-    {{/if}}
-  </span>
-</div>

package/addon/components/pix-code.hbs

@@ -1,31 +0,0 @@
-<div>
-  {{#if (has-block "label")}}
-    <PixLabel
-      @for={{this.id}}
-      @requiredLabel={{@requiredLabel}}
-      @subLabel={{@subLabel}}
-      @size={{@size}}
-      @screenReaderOnly={{@screenReaderOnly}}
-    >
-      {{yield to="label"}}
-    </PixLabel>
-  {{/if}}
-  <div>
-    <input
-      id={{this.id}}
-      class="pix-code"
-      style={{this.style}}
-      value={{@value}}
-      aria-required="{{if @requiredLabel true false}}"
-      required={{if @requiredLabel true false}}
-      maxlength={{this.length}}
-      minlength={{this.length}}
-      aria-describedby={{this.ariaDescribedBy}}
-      ...attributes
-    />
-
-    {{#if this.hasErrorMessage}}
-      <p id={{this.ariaDescribedBy}} class="pix-code__error-message">{{@errorMessage}}</p>
-    {{/if}}
-  </div>
-</div>

package/addon/components/pix-code.js

@@ -1,24 +0,0 @@
-import { warn } from '@ember/debug';
-import { htmlSafe } from '@ember/template';
-
-import PixInputBase from './pix-input-base';
-
-export default class PixCode extends PixInputBase {
-  constructor() {
-    super(...arguments);
-
-    this.prefix = 'pix-code';
-  }
-
-  get length() {
-    warn('PixCode: @length is required.', !['', null, undefined].includes(this.args.length), {
-      id: 'pix-ui.code.length.required',
-    });
-
-    return this.args.length || 1;
-  }
-
-  get style() {
-    return htmlSafe('--nb-characters:' + this.length);
-  }
-}

package/addon/components/pix-filterable-and-searchable-select.hbs

@@ -1,48 +0,0 @@
-<div id={{this.mainId}} ...attributes>
-  <PixLabel
-    @for={{this.pixSelectId}}
-    @requiredLabel={{@requiredLabel}}
-    @size={{@size}}
-    @subLabel={{@subLabel}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @inlineLabel={{@inlineLabel}}
-  >
-    {{yield to="label"}}
-  </PixLabel>
-  <div
-    class="pix-filterable-and-searchable-select{{if
-        @errorMessage
-        ' pix-filterable-and-searchable-select--error'
-      }}"
-  >
-    <PixMultiSelect
-      id={{this.pixMultiSelectId}}
-      @values={{this.selectedCategories}}
-      @options={{this.categories}}
-      @onChange={{this.selectCategories}}
-      @isComputeWidthDisabled={{true}}
-      @screenReaderOnly={{true}}
-      @className="pix-filterable-and-searchable-select__pix-multi-select"
-    >
-      <:label>{{yield to="categoriesLabel"}}</:label>
-      <:placeholder>{{this.categoriesPlaceholder}}</:placeholder>
-      <:default as |option|>{{option.label}}</:default>
-    </PixMultiSelect>
-    <PixSelect
-      @id={{this.pixSelectId}}
-      @placeholder={{@placeholder}}
-      @value={{@value}}
-      @options={{this.selectableOptions}}
-      @onChange={{@onChange}}
-      @isSearchable={{@isSearchable}}
-      @searchLabel={{@searchLabel}}
-      @screenReaderOnly={{true}}
-      @hideDefaultOption={{@hideDefaultOption}}
-      @className="pix-filterable-and-searchable-select__pix-select"
-      @isComputeWidthDisabled={{true}}
-    />
-  </div>
-  {{#if @errorMessage}}
-    <p class="pix-filterable-and-searchable-select__error-message">{{@errorMessage}}</p>
-  {{/if}}
-</div>

package/addon/components/pix-gauge.hbs

@@ -1,98 +0,0 @@
-<svg
-  xmlns:svg="http://www.w3.org/2000/svg"
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox={{this.viewBox}}
-  version="1.1"
-  preserveAspectRatio="none"
-  class="result-level-gauge {{if @isSmall 'result-level-gauge__small'}}"
-  role="progressbar"
-  aria-valuenow={{this.formatNumber this.reachedLevel}}
-  aria-valuemin={{0}}
-  aria-valuemax={{this.formatNumber this.maxLevel}}
-  aria-valuetext={{this.label}}
-  aria-label={{this.label}}
->
-  <title {{this.label}}></title>
-
-  {{! gauge grey background}}
-  <rect
-    y={{22}}
-    width="100%"
-    height={{this.backgroundHeight}}
-    rx={{this.greyGaugeRx}}
-    class="result-level-gauge__background"
-  />
-
-  <g transform="translate(4, 0)">
-    {{! template-lint-disable no-inline-styles style-concatenation }}
-    {{! gauge white max level}}
-    <rect
-      y={{26}}
-      width="calc(calc(100% - 8px) * {{this.maxLevelPourcentage}})"
-      height={{this.whiteAndPurpleGaugesHeight}}
-      rx={{this.whiteAndPurpleGaugeRx}}
-      class="result-level-gauge__max-bar"
-    />
-    {{#unless this.hideValues}}
-      <g style="transform: translate(calc(calc(100% - 8px) * {{this.maxLevelPourcentage}}))">
-        <text
-          y={{this.statsFontHeight}}
-          x="0"
-          dx={{-10}}
-          dy={{26}}
-          class="result-level-gauge__max-value"
-          aria-hidden={{this.hideValues}}
-        >{{this.formatNumber @maxLevel}}</text>
-      </g>
-    {{/unless}}
-    {{! mean purple level }}
-    <rect
-      y={{26}}
-      width="max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px)"
-      height={{this.whiteAndPurpleGaugesHeight}}
-      rx={{this.whiteAndPurpleGaugeRx}}
-      class="result-level-gauge__mean-bar"
-    />
-    {{#unless this.hideValues}}
-      <g
-        style="transform: translate(max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px))"
-      >
-        <text
-          y={{this.statsFontHeight}}
-          x="0"
-          dx={{-10}}
-          dy={{26}}
-          class="result-level-gauge__mean-value"
-          aria-hidden={{this.hideValues}}
-        >{{this.formatNumber @reachedLevel}}</text>
-      </g>
-    {{/unless}}
-    {{! level labels }}
-    {{#unless @isSmall}}
-      {{#each @stepLabels as |stepLabel index|}}
-        <g style="transform: translate(calc(calc(100% - 8px) * {{this.stepLabelX index}}))">
-          <text
-            y={{15}}
-            class="result-level-gauge__rank
-              {{if (this.isLevelActive index) 'result-level-gauge__rank--active'}}"
-          >{{stepLabel}}</text>
-        </g>
-        {{#unless (eq index 0)}}
-          <g style="transform: translate(calc(100% * {{this.stepLineX index}}))">
-            <line
-              x1="0"
-              y1={{7}}
-              x2="0"
-              y2="74.6641"
-              stroke-width={{2}}
-              stroke-linecap="round"
-              stroke-dasharray="2 8"
-              class="result-level-gauge__separator"
-              role="separator"
-            />
-          </g>
-        {{/unless}}
-      {{/each}}
-    {{/unless}}
-  </g>
-</svg>

package/addon/components/pix-gauge.js

@@ -1,96 +0,0 @@
-import { warn } from '@ember/debug';
-import Component from '@glimmer/component';
-export default class PixGauge extends Component {
-  get label() {
-    warn('PixGauge: @label must be defined', !this.args.label, {
-      id: 'pix-ui.gauge.label.not-defined',
-    });
-    return this.args.label;
-  }
-
-  get reachedLevel() {
-    warn(
-      'PixGauge: @reachedLevel must be between 0 and 8',
-      this.args.reachedLevel <= 8 || this.args.reachedLevel >= 0,
-      {
-        id: 'pix-ui.gauge.reachedLevel.not-defined',
-      },
-    );
-    return this.args.reachedLevel;
-  }
-
-  get maxLevel() {
-    warn(
-      'PixGauge: @maxLevel must be between 1 and 8',
-      this.args.maxLevel <= 8 || this.args.maxLevel >= 1,
-      {
-        id: 'pix-ui.gauge.maxLevel.not-defined',
-      },
-    );
-    return this.args.maxLevel;
-  }
-
-  get hideValues() {
-    return this.args.hideValues ?? false;
-  }
-
-  get maxLevelPourcentage() {
-    return this.maxLevel / 8;
-  }
-  get viewBox() {
-    if (this.args.isSmall) {
-      return '0 22 200 32';
-    }
-    return '0 0 100% 70';
-  }
-
-  get reachedLevelPercentage() {
-    return this.reachedLevel / 8;
-  }
-
-  get whiteAndPurpleGaugeRx() {
-    return this.args.isSmall ? 12 : 20;
-  }
-
-  get whiteAndPurpleGaugesHeight() {
-    return this.args.isSmall ? 24 : 40;
-  }
-
-  // background
-  get greyGaugeRx() {
-    return this.args.isSmall ? 16 : 24;
-  }
-
-  get backgroundHeight() {
-    return this.args.isSmall ? 32 : 48;
-  }
-
-  get statsFontHeight() {
-    return this.args.isSmall ? 18 : 26;
-  }
-
-  isLevelActive = (index) => {
-    if (this.reachedLevel === 0 && index === 0) return true;
-    const step = 8 / this.args.stepLabels.length;
-    return index * step < this.reachedLevel && this.reachedLevel <= (index + 1) * step;
-  };
-
-  stepLabelX = (index) => {
-    const stepStart = 1 / this.args.stepLabels.length;
-    return `${stepStart * index + (1 / 2) * stepStart}`;
-  };
-
-  stepLineX = (index) => {
-    const stepStart = 1 / this.args.stepLabels.length;
-    return `${stepStart * index}`;
-  };
-
-  formatNumber = (str) => {
-    const num = Number(str);
-    const oneDigitNum = num.toFixed(1);
-    if (oneDigitNum.toString().endsWith('0')) {
-      return Math.ceil(oneDigitNum);
-    }
-    return oneDigitNum;
-  };
-}

package/addon/components/pix-icon-button.hbs

@@ -1,15 +0,0 @@
-<button
-  type="button"
-  class="pix-icon-button pix-icon-button--{{this.size}}"
-  {{on "click" this.triggerAction}}
-  aria-disabled="{{this.isDisabled}}"
-  ...attributes
->
-  <span class="screen-reader-only">{{this.ariaLabel}}</span>
-  <PixIcon
-    class="pix-icon-button__icon pix-icon-button__icon--{{this.size}}"
-    @ariaHidden={{true}}
-    @name={{@iconName}}
-    @plainIcon={{@plainIcon}}
-  />
-</button>

package/addon/components/pix-icon.hbs

@@ -1,15 +0,0 @@
-{{#let (unique-id) as |titleId|}}
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden={{this.ariaHidden}}
-    role="img"
-    class="pix-icon"
-    aria-describedby={{if this.title titleId}}
-    ...attributes
-  >
-    {{#if this.title}}
-      <title id={{titleId}}>{{this.title}}</title>
-    {{/if}}
-    <use href="/@1024pix/pix-ui/svg/pix-sprite.svg#{{this.iconName}}" />
-  </svg>
-{{/let}}

package/addon/components/pix-indicator-card.hbs

@@ -1,47 +0,0 @@
-<PixBlock @variant="orga" class="indicator-card" role="region" ...attributes>
-  {{#if @isLoading}}
-    <p class="screen-reader-only">{{@loadingMessage}}</p>
-    <div class="indicator-card__icon" aria-hidden="true"></div>
-    <div class="indicator-card__content" aria-hidden="true"></div>
-  {{else}}
-    <div id={{this.iconId}} class="indicator-card__icon-wrapper {{this.color}}">
-      <PixIcon
-        @name={{@iconName}}
-        @plainIcon={{@plainIcon}}
-        @ariaHidden={{true}}
-        class="indicator-card__icon"
-      />
-    </div>
-    <dl class="indicator-card__content">
-      <div class="indicator-card__title">
-        <dt>{{@title}}</dt>
-        {{#if @info}}
-          <PixTooltip
-            @id={{this.tooltipId}}
-            @position="top"
-            @isWide={{true}}
-            class="indicator-card__tooltip hide-on-mobile"
-          >
-            <:triggerElement>
-              <PixIcon
-                @name="info"
-                @plainIcon={{true}}
-                class="indicator-card__tooltip-icon"
-                tabindex="0"
-                aria-label={{@infoLabel}}
-                aria-describedby={{this.tooltipId}}
-              />
-            </:triggerElement>
-            <:tooltip>
-              {{@info}}
-            </:tooltip>
-          </PixTooltip>
-        {{/if}}
-      </div>
-      <dd class="indicator-card__value">{{yield}}</dd>
-      <p class="indicator-card__sub">
-        {{yield to="sub"}}
-      </p>
-    </dl>
-  {{/if}}
-</PixBlock>

package/addon/components/pix-indicator-card.js

@@ -1,14 +0,0 @@
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-
-export default class PixIndicatorCard extends Component {
-  id = guidFor(this);
-  iconId = 'icon-' + this.id;
-  tooltipId = 'tooltip-' + this.id;
-
-  get color() {
-    const { color } = this.args;
-    if (!color) return `indicator-card__icon-wrapper--grey`;
-    return `indicator-card__icon-wrapper--${color}`;
-  }
-}

package/addon/components/pix-input-code.hbs

@@ -1,24 +0,0 @@
-<div class="pix-input-code">
-  <fieldset aria-describedby="pix-input-code__details-of-use">
-    <p id="pix-input-code__details-of-use">{{this.explanationOfUse}}</p>
-    <legend>{{this.legend}}</legend>
-    {{#each this.numberOfIterations as |i|}}
-      <input
-        id="code-input-{{i}}"
-        type="{{this.inputType}}"
-        aria-label="{{this.ariaLabel}} {{i}}"
-        class="pix-input-code__input"
-        min="1"
-        max="9"
-        autocomplete="off"
-        placeholder="{{this.placeholder}}"
-        {{on "keydown" this.handleArrowUpOrDown}}
-        {{on "keyup" (fn this.handleKeyUp i)}}
-        {{on "input" (fn this.handleCodeInput i)}}
-        {{on "paste" (fn this.handlePaste i)}}
-        {{on "focus" (fn this.handleFocus i)}}
-        ...attributes
-      />
-    {{/each}}
-  </fieldset>
-</div>

package/addon/components/pix-input-password.hbs

@@ -1,68 +0,0 @@
-<div class="pix-input-password {{if @inlineLabel ' pix-input-password--inline'}}">
-  <PixLabel
-    @for={{this.id}}
-    @requiredLabel={{@requiredLabel}}
-    @size={{@size}}
-    @subLabel={{@subLabel}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @inlineLabel={{@inlineLabel}}
-  >
-    {{yield to="label"}}
-  </PixLabel>
-  <div>
-    <div
-      class="pix-input-password__container
-        {{this.validationStatusClassName}}
-        {{if @prefix 'pix-input-password__with-prefix'}}"
-    >
-
-      {{#if @prefix}}
-        <span class="pix-input-password__prefix">{{@prefix}}</span>
-      {{/if}}
-
-      <input
-        id={{this.id}}
-        type={{if this.isPasswordVisible "text" "password"}}
-        value={{@value}}
-        aria-required="{{if @requiredLabel true false}}"
-        required={{if @requiredLabel true false}}
-        aria-describedby={{this.ariaDescribedBy}}
-        ...attributes
-      />
-
-      <PixIconButton
-        class="pix-input-password__button"
-        @iconName={{if this.isPasswordVisible "eye" "eyeOff"}}
-        @plainIcon={{true}}
-        @ariaLabel={{if
-          this.isPasswordVisible
-          "Masquer le mot de passe"
-          "Afficher le mot de passe"
-        }}
-        @triggerAction={{this.togglePasswordVisibility}}
-        @size="small"
-      />
-
-      {{#if this.hasError}}
-        <PixIcon
-          @name="close"
-          @ariaHidden={{true}}
-          class="pix-input-password__icon pix-input-password__error-icon"
-        />
-      {{/if}}
-      {{#if this.hasSuccess}}
-        <PixIcon
-          @name="check"
-          @ariaHidden={{true}}
-          class="pix-input-password__icon pix-input-password__success-icon"
-        />
-      {{/if}}
-    </div>
-
-    {{#if this.hasErrorMessage}}
-      <p id={{this.ariaDescribedBy}} class="pix-input-password__error-message">
-        {{@errorMessage}}
-      </p>
-    {{/if}}
-  </div>
-</div>

package/addon/components/pix-input-password.js

@@ -1,28 +0,0 @@
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-import PixInputBase from './pix-input-base';
-
-export default class PixInputPassword extends PixInputBase {
-  constructor() {
-    super(...arguments);
-
-    this.prefix = 'pix-input-password';
-    this.inputValidationError = {
-      default: '',
-      error: 'pix-input-password__container--error',
-      success: 'pix-input-password__container--success',
-    };
-  }
-
-  @tracked isPasswordVisible = false;
-
-  @action
-  togglePasswordVisibility() {
-    this.isPasswordVisible = !this.isPasswordVisible;
-    const InputElement = document.getElementById(this.args.id);
-    if (InputElement) {
-      InputElement.focus();
-    }
-  }
-}

package/addon/components/pix-input.hbs

@@ -1,38 +0,0 @@
-<div class={{this.rootClassNames}}>
-  {{#if (has-block "label")}}
-    <PixLabel
-      @for={{this.id}}
-      @requiredLabel={{@requiredLabel}}
-      @subLabel={{@subLabel}}
-      @size={{@size}}
-      @screenReaderOnly={{@screenReaderOnly}}
-      @inlineLabel={{@inlineLabel}}
-    >
-      {{yield to="label"}}
-    </PixLabel>
-  {{/if}}
-  <div class="pix-input__field-container">
-    <div class="pix-input__container">
-      <input
-        id={{this.id}}
-        class="pix-input__input {{this.validationStatusClassName}}"
-        value={{@value}}
-        aria-required="{{if @requiredLabel true false}}"
-        required={{if @requiredLabel true false}}
-        aria-describedby={{this.ariaDescribedBy}}
-        ...attributes
-      />
-
-      {{#if this.hasError}}
-        <PixIcon @name="close" class="pix-input__error-icon" @ariaHidden={{true}} />
-      {{/if}}
-      {{#if this.hasSuccess}}
-        <PixIcon @name="check" class="pix-input__success-icon" @ariaHidden={{true}} />
-      {{/if}}
-    </div>
-
-    {{#if this.hasErrorMessage}}
-      <p id={{this.ariaDescribedBy}} class="pix-input__error-message">{{@errorMessage}}</p>
-    {{/if}}
-  </div>
-</div>

package/addon/components/pix-input.js

@@ -1,14 +0,0 @@
-import PixInputBase from './pix-input-base';
-
-export default class PixInput extends PixInputBase {
-  constructor() {
-    super(...arguments);
-
-    this.prefix = 'pix-input';
-    this.inputValidationError = {
-      default: '',
-      error: 'pix-input__input--error',
-      success: 'pix-input__input--success',
-    };
-  }
-}

package/addon/components/pix-label-wrapped.hbs

@@ -1,32 +0,0 @@
-<label for={{@for}} class={{this.className}} ...attributes>
-  {{#if this.hasError}}
-    <PixIcon
-      @name="cancel"
-      @plainIcon={{true}}
-      @ariaHidden={{true}}
-      class="pix-label-wrapped__state-icon"
-    />
-  {{/if}}
-  {{#if this.hasSuccess}}
-    <PixIcon
-      @name="checkCircle"
-      @plainIcon={{true}}
-      @ariaHidden={{true}}
-      class="pix-label-wrapped__state-icon"
-    />
-  {{/if}}
-
-  {{yield to="inputElement"}}
-
-  <span class="{{if @screenReaderOnly 'screen-reader-only'}}">
-    {{yield}}
-
-    {{#if @requiredLabel}}
-      <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
-    {{/if}}
-
-    {{#if @subLabel}}
-      <span class="pix-label__sub-label">{{@subLabel}}</span>
-    {{/if}}
-  </span>
-</label>