@1024pix/pix-ui 11.1.0

package/addon/components/pix-button-base.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+
+export default class PixButtonBase extends Component {
+  get shape() {
+    return this.args.shape || 'squircle';
+  }
+
+  get backgroundColor() {
+    return this.args.backgroundColor || 'blue';
+  }
+
+  get size() {
+    return this.args.size || 'big';
+  }
+
+  get baseClassNames() {
+    const classNames = [
+      'pix-button',
+      `pix-button--shape-${this.shape}`,
+      `pix-button--size-${this.size}`,
+      `pix-button--background-${this.backgroundColor}`,
+    ];
+    this.args.isBorderVisible && classNames.push('pix-button--border');
+    this.args.isDisabled && classNames.push('pix-button--disabled');
+    return classNames;
+  }
+}

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

@@ -0,0 +1,16 @@
+{{#if @route}}
+  <LinkTo
+    @route={{@route}}
+    @models={{if @model (array @model) this.defaultModel}}
+    @disabled={{@isDisabled}}
+    @query={{if @query @query this.defaultParams}}
+    class={{this.className}}
+    ...attributes
+  >
+    {{yield}}
+  </LinkTo>
+{{else}}
+  <a href={{@href}} class={{this.className}} ...attributes>
+    {{yield}}
+  </a>
+{{/if}}

package/addon/components/pix-button-link.js

@@ -0,0 +1,10 @@
+import PixButtonBase from './pix-button-base';
+
+export default class PixButtonLink extends PixButtonBase {
+  defaultModel = [];
+  defaultParams = {};
+
+  get className() {
+    return super.baseClassNames.join(' ');
+  }
+}

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

@@ -0,0 +1,11 @@
+<label for={{@id}} class={{this.className}} role="button">
+  {{yield}}
+</label>
+<input
+  id={{@id}}
+  type="file"
+  class="pix-button-upload__input"
+  value={{this.files}}
+  {{on "change" this.handleChange}}
+  ...attributes
+/>

package/addon/components/pix-button-upload.js

@@ -0,0 +1,20 @@
+import PixButtonBase from './pix-button-base';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class PixButtonUpload extends PixButtonBase {
+  @tracked
+  files = [];
+
+  get className() {
+    return super.baseClassNames.join(' ');
+  }
+
+  @action
+  async handleChange(e) {
+    if (e.target?.files?.length) {
+      await this.args.onChange(e.target.files);
+    }
+    this.files = [];
+  }
+}

package/addon/components/pix-button.hbs

@@ -0,0 +1,43 @@
+{{#if @route}}
+  <LinkTo
+    @route={{@route}}
+    @models={{if @model (array @model) this.defaultModel}}
+    class={{this.className}}
+    ...attributes
+  >
+    {{yield}}
+  </LinkTo>
+{{else}}
+  {{#if this.enableTriggerAction}}
+    <button
+      type={{this.type}}
+      class={{this.className}}
+      {{on "click" this.triggerAction}}
+      ...attributes
+      disabled={{this.isButtonLoadingOrDisabled}}
+      aria-disabled="{{this.ariaDisabled}}"
+    >
+      {{#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}}
+        {{yield}}
+      {{/if}}
+    </button>
+  {{else}}
+    <button
+      type={{this.type}}
+      class={{this.className}}
+      ...attributes
+      disabled={{this.isButtonLoadingOrDisabled}}
+      aria-disabled="{{this.ariaDisabled}}"
+    >
+      {{yield}}
+    </button>
+  {{/if}}
+
+{{/if}}

package/addon/components/pix-button.js

@@ -0,0 +1,54 @@
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+import PixButtonBase from './pix-button-base';
+
+export default class PixButton extends PixButtonBase {
+  text = 'pix-button';
+  defaultModel = [];
+
+  @tracked isTriggering = false;
+
+  get isLoading() {
+    return this.args.isLoading || this.isTriggering;
+  }
+
+  get type() {
+    return this.args.type || 'button';
+  }
+
+  get loadingColor() {
+    return this.args.loadingColor || this.args['loading-color'] || 'white';
+  }
+
+  get isButtonLoadingOrDisabled() {
+    return this.isLoading || this.args.isDisabled;
+  }
+
+  get ariaDisabled() {
+    return this.isButtonLoadingOrDisabled;
+  }
+
+  get className() {
+    return super.baseClassNames.join(' ');
+  }
+
+  get enableTriggerAction() {
+    return !(this.type === 'submit' && !this.args.triggerAction);
+  }
+
+  @action
+  async triggerAction(params) {
+    try {
+      this.isTriggering = true;
+      await this.args.triggerAction(params);
+      this.isTriggering = false;
+    } catch (e) {
+      this.isTriggering = false;
+      if (!this.args.triggerAction) {
+        throw new Error('@triggerAction params is required for PixButton !');
+      }
+      throw new Error(e);
+    }
+  }
+}

package/addon/components/pix-collapsible.hbs

@@ -0,0 +1,29 @@
+<div class="pix-collapsible {{if this.isUnCollapsed "pix-collapsible--uncollapsed"}}">
+
+  <button
+    type="button"
+    {{on "click" this.toggleCollapsible}}
+    class="pix-collapsible__title {{if this.isUnCollapsed "pix-collapsible__title--uncollapsed"}}"
+    aria-controls={{this.contentId}}
+    aria-expanded={{if this.isUnCollapsed "true" "false"}}
+    ...attributes
+  >
+    <span>
+      {{#if @titleIcon}}
+        <FaIcon @icon={{@titleIcon}} class="pix-collapsible-title__icon" />
+      {{/if}}
+      {{this.title}}
+    </span>
+
+    <FaIcon @icon="{{if this.isCollapsed "plus" "minus"}}" class="pix-collapsible-title__icon" />
+  </button>
+
+  <div
+    id={{this.contentId}}
+    aria-hidden={{if this.isCollapsed "true" "false"}}
+    class="pix-collapsible__content
+      {{if this.isUnCollapsed " pix-collapsible__content--uncollapse"}}"
+  >
+    {{yield}}
+  </div>
+</div>

package/addon/components/pix-collapsible.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+
+export default class PixCollapsible extends Component {
+  text = 'pix-collapsible';
+  contentId = 'pix-collapsible-' + guidFor(this);
+
+  @tracked isCollapsed = true;
+
+  get isUnCollapsed() {
+    return !this.isCollapsed;
+  }
+
+  get title() {
+    if (!this.args.title || !this.args.title.trim()) {
+      throw new Error('ERROR in PixCollapsible component, @title param is not provided');
+    }
+    return this.args.title;
+  }
+
+  @action
+  toggleCollapsible() {
+    this.isCollapsed = !this.isCollapsed;
+  }
+}

package/addon/components/pix-filter-banner.hbs

@@ -0,0 +1,28 @@
+<div class="pix-filter-banner" ...attributes>
+  <div class="pix-filter-banner__container-left">
+    {{#if this.displayTitle}}
+      <p class="pix-filter-banner__title">{{@title}}</p>
+    {{/if}}
+    <div class="pix-filter-banner__content">
+      {{yield}}
+    </div>
+  </div>
+  <div class="pix-filter-banner__container-right">
+    {{#if this.displayDetails}}
+      <p class="pix-filter-banner__details">{{@details}}</p>
+    {{/if}}
+    {{#if this.displayClearFilters}}
+      <div class="pix-filter-banner__button-container">
+        <PixButton
+          class="pix-filter-banner__button"
+          @shape="squircle"
+          @size="small"
+          @triggerAction={{@onClearFilters}}
+        >
+          <FaIcon class="pix-filter-banner-button__icon" @icon="trash-alt" @prefix="far" />
+          {{@clearFiltersLabel}}
+        </PixButton>
+      </div>
+    {{/if}}
+  </div>
+</div>

package/addon/components/pix-filter-banner.js

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+
+export default class PixFilterBanner extends Component {
+  get displayTitle() {
+    return Boolean(this.args.title);
+  }
+  get displayDetails() {
+    return Boolean(this.args.details);
+  }
+  get displayClearFilters() {
+    return Boolean(this.args.clearFiltersLabel);
+  }
+}

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

@@ -0,0 +1,11 @@
+<button
+  type="button"
+  aria-label={{this.ariaLabel}}
+  class="pix-icon-button pix-icon-button--{{this.size}}
+    pix-icon-button--{{this.color}}
+    {{if @withBackground " pix-icon-button--background"}}"
+  {{on "click" this.triggerAction}}
+  ...attributes
+>
+  <FaIcon @icon={{this.icon}} @prefix={{@iconPrefix}} />
+</button>

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

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class PixIconButton extends Component {
+  text = 'pix-icon-button';
+
+  get icon() {
+    const defaultIcon = 'plus';
+    return this.args.icon ? this.args.icon : defaultIcon;
+  }
+
+  get size() {
+    return this.args.size || 'big';
+  }
+
+  get color() {
+    return this.args.color || 'light-grey';
+  }
+
+  get ariaLabel() {
+    if (!this.args.ariaLabel || !this.args.ariaLabel.trim()) {
+      throw new Error('ERROR in PixIconButton component, @ariaLabel param is not provided.');
+    }
+    return this.args.ariaLabel;
+  }
+
+  @action
+  triggerAction() {
+    if (this.args.triggerAction) {
+      this.args.triggerAction();
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+{{! template-lint-disable no-down-event-binding }}
+<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
+        ...attributes
+        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)}}
+      />
+    {{/each}}
+  </fieldset>
+</div>

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

@@ -0,0 +1,133 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+const ERROR_MESSAGE =
+  'ERROR in PixInputCode component, you must provide an @ariaLabel and a @legend';
+const NAVIGATION_EXPLANATION =
+  'Pour se déplacer de champ en champ vous pouvez utiliser la tabulation ou bien les flèches gauche et droite de votre clavier.';
+const NUMBER_INPUT_EXPLANATION =
+  'Pour remplir un champ vous pouvez utiliser des chiffres de 1 à 9 ou bien les flèches haut et bas de votre clavier pour incrémenter de 1 la valeur du champ.';
+const TEXT_INPUT_EXPLANATION =
+  'Pour remplir un champ vous pouvez utiliser les caractères alphanumériques de votre clavier.';
+
+export default class PixInputCode extends Component {
+  moveFocus = true;
+  numInputs = this.args.numInputs || 6;
+
+  get numberOfIterations() {
+    return Array.from({ length: this.numInputs }, (_, i) => i + 1);
+  }
+
+  get ariaLabel() {
+    if (!this.args.ariaLabel) {
+      throw new Error(ERROR_MESSAGE);
+    }
+    return this.args.ariaLabel;
+  }
+
+  get explanationOfUse() {
+    const defaultFillingExplanation =
+      this.inputType === 'number' ? NUMBER_INPUT_EXPLANATION : TEXT_INPUT_EXPLANATION;
+    const defaultExplanationOfUseMessage = NAVIGATION_EXPLANATION + ' ' + defaultFillingExplanation;
+
+    return this.args.explanationOfUse ? this.args.explanationOfUse : defaultExplanationOfUseMessage;
+  }
+
+  get legend() {
+    if (!this.args.legend) {
+      throw new Error(ERROR_MESSAGE);
+    }
+    return this.args.legend;
+  }
+
+  get inputType() {
+    return this.args.inputType || 'number';
+  }
+
+  get placeholder() {
+    return this.inputType === 'number' ? '0' : null;
+  }
+
+  focusElement(index) {
+    const nextElem = document.getElementById(`code-input-${index}`);
+    nextElem && nextElem.focus();
+  }
+
+  validateInput(elem) {
+    if (this.inputType === 'number') {
+      const startsWithDigit = elem.value.match(/^[1-9]/);
+      if (!startsWithDigit) elem.value = '';
+    }
+    if (elem.value.length > 1) elem.value = [...elem.value][0];
+  }
+
+  triggerAction() {
+    if (!this.args.onAllInputsFilled) return;
+
+    const code = [];
+    for (let i = 1; i <= this.numInputs; i++) {
+      const elem = document.getElementById(`code-input-${i}`);
+      elem.value.length > 0 && code.push(elem.value);
+    }
+    if (code.length === this.numInputs) {
+      this.args.onAllInputsFilled(code.join(''));
+    }
+  }
+
+  @action
+  handleCodeInput(index) {
+    const elem = document.getElementById(`code-input-${index}`);
+    this.validateInput(elem);
+    if (elem.value.length > 0) {
+      elem.classList.add('filled');
+      this.moveFocus && this.focusElement(index + 1);
+      this.triggerAction();
+    } else {
+      elem.classList.remove('filled');
+    }
+  }
+
+  @action
+  handleKeyUp(index, event) {
+    const eventMap = {
+      Backspace: index - 1,
+      ArrowLeft: index - 1,
+      ArrowRight: index + 1,
+    };
+    const newIndex = eventMap[event.code || event.key];
+    this.focusElement(newIndex);
+  }
+
+  @action
+  handleArrowUpOrDown(event) {
+    this.moveFocus = true;
+    const eventCode = event.code || event.key;
+    if (['ArrowUp', 'ArrowDown'].includes(eventCode)) this.moveFocus = false;
+  }
+
+  @action
+  handlePaste(index, event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const pastedText = (event.clipboardData || window.clipboardData).getData('text');
+    const pastedTextWithOnlyValidCharacters = _extractValidCharacters(pastedText);
+
+    pastedTextWithOnlyValidCharacters.forEach((char) => {
+      const input = document.getElementById(`code-input-${index}`);
+      if (input) {
+        this.focusElement(index);
+        input.value = char;
+        input.classList.add('filled');
+        index++;
+      }
+    });
+    this.focusElement(index);
+    this.triggerAction();
+  }
+}
+
+function _extractValidCharacters(pastedText) {
+  const alphanumericCharacters = /^[a-zA-Z0-9_]*$/;
+  return [...pastedText].filter((char) => alphanumericCharacters.test(char));
+}

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

@@ -0,0 +1,43 @@
+<div class="pix-input-password">
+  {{#if this.label}}
+    <label for={{this.id}} class="pix-input__label">{{this.label}}</label>
+  {{/if}}
+  {{#if @information}}
+    <label for={{this.id}} class="pix-input__information">{{@information}}</label>
+  {{/if}}
+  <div
+    class="pix-input-password__container
+      {{if @errorMessage "pix-input-password__error-container"}}
+      {{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-label={{this.ariaLabel}}
+      {{on "change" this.onChange}}
+      ...attributes
+    />
+
+    <PixIconButton
+      class="pix-input-password__button {{if @errorMessage " pix-input-password__error-button"}}"
+      @icon={{if this.isPasswordVisible "eye" "eye-slash"}}
+      @ariaLabel={{if this.isPasswordVisible "Masquer le mot de passe" "Afficher le mot de passe"}}
+      @triggerAction={{this.togglePasswordVisibility}}
+      @size="small"
+    />
+
+    {{#if @errorMessage}}
+      <FaIcon @icon="times" class="pix-input-password__error-icon" />
+    {{/if}}
+  </div>
+
+  {{#if @errorMessage}}
+    <label for={{this.id}} class="pix-input__error-message">{{@errorMessage}}</label>
+  {{/if}}
+</div>

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

@@ -0,0 +1,34 @@
+import PixInput from './pix-input';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+const ERROR_MESSAGE =
+  'ERROR in PixInputPassword component, you must provide @label or @ariaLabel params';
+
+export default class PixInputPassword extends PixInput {
+  @tracked isPasswordVisible = false;
+
+  get label() {
+    if (!this.args.label && !this.args.ariaLabel) {
+      throw new Error(ERROR_MESSAGE);
+    }
+    return this.args.label;
+  }
+
+  get ariaLabel() {
+    if (!this.args.label && !this.args.ariaLabel) {
+      throw new Error(ERROR_MESSAGE);
+    }
+    return this.args.label ? null : this.args.ariaLabel;
+  }
+
+  @action
+  togglePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+  }
+
+  @action
+  onChange() {
+    if (typeof this.args.onChange === 'function') this.args.onChange();
+  }
+}

package/addon/components/pix-input.hbs

@@ -0,0 +1,30 @@
+<div class="pix-input">
+  {{#if @label}}
+    <label for={{this.id}} class="pix-input__label">{{@label}}</label>
+  {{/if}}
+  {{#if @information}}
+    <label for={{this.id}} class="pix-input__information">{{@information}}</label>
+  {{/if}}
+
+  <div class="pix-input__container">
+    <input
+      id={{this.id}}
+      class={{this.className}}
+      value={{@value}}
+      {{on "change" this.onChange}}
+      ...attributes
+    />
+
+    {{#if @errorMessage}}
+      <FaIcon @icon="times" class="pix-input__error-icon" />
+    {{/if}}
+
+    {{#if @icon}}
+      <FaIcon @icon={{@icon}} class="pix-input__icon {{if @isIconLeft "pix-input__icon--left"}}" />
+    {{/if}}
+  </div>
+
+  {{#if @errorMessage}}
+    <label for={{this.id}} class="pix-input__error-message">{{@errorMessage}}</label>
+  {{/if}}
+</div>

package/addon/components/pix-input.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+
+import { action } from '@ember/object';
+export default class PixInput extends Component {
+  text = 'pix-input';
+
+  get id() {
+    if (!this.args.id || !this.args.id.toString().trim()) {
+      throw new Error('ERROR in PixInput component, @id param is not provided');
+    }
+    return this.args.id;
+  }
+
+  get className() {
+    const classNames = [];
+    this.args.errorMessage && classNames.push('pix-input__input--error');
+    this.args.icon && classNames.push('pix-input__input--icon');
+    this.args.isIconLeft && classNames.push('pix-input__input--icon-left');
+    return classNames.join(' ');
+  }
+
+  @action
+  onChange() {
+    if (typeof this.args.onChange === 'function') this.args.onChange();
+  }
+}

package/addon/components/pix-message.hbs

@@ -0,0 +1,8 @@
+<p class="pix-message {{concat "pix-message--" this.type}}" ...attributes>
+  {{#if @withIcon}}
+    <FaIcon @icon={{this.iconClass}} />
+  {{/if}}
+  <span class="pix-message__content">
+    {{yield}}
+  </span>
+</p>

package/addon/components/pix-message.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+
+const TYPE_INFO = 'info';
+const TYPE_SUCCESS = 'success';
+const TYPE_WARNING = 'warning';
+const TYPE_ALERT = 'alert';
+const TYPE_ERROR = 'error';
+
+export default class PixMessage extends Component {
+  get type() {
+    const correctTypes = [TYPE_INFO, TYPE_SUCCESS, TYPE_WARNING, TYPE_ALERT, TYPE_ERROR];
+    if (this.args.type === 'alert') {
+      console.warn(
+        'ERROR in PixMessage component, "alert" type is deprecated. Use "error" type instead.'
+      );
+    }
+    return correctTypes.includes(this.args.type) ? this.args.type : 'info';
+  }
+
+  get iconClass() {
+    const classes = {
+      [TYPE_INFO]: 'info-circle',
+      [TYPE_SUCCESS]: 'check-circle',
+      [TYPE_WARNING]: 'exclamation-circle',
+      [TYPE_ALERT]: 'exclamation-triangle',
+      [TYPE_ERROR]: 'exclamation-triangle',
+    };
+    return classes[this.type];
+  }
+}