@1024pix/pix-ui 11.1.0

package/addon/components/pix-multi-select.hbs

@@ -0,0 +1,70 @@
+<div class="pix-multi-select" ...attributes {{on-click-outside this.hideDropDown capture=true}}>
+
+  {{#if this.label}}
+    <label for={{@id}} class="pix-multi-select__label">{{this.label}}</label>
+  {{/if}}
+
+  {{#if @isSearchable}}
+    <label class="pix-multi-select-header {{if this.isBig "pix-multi-select-header--big"}}">
+
+      <span class="pix-multi-select-header__title">{{@title}}</span>
+      <FaIcon @icon="search" class="pix-multi-select-header__search-icon" />
+
+      <input
+        id={{@id}}
+        type="text"
+        name={{@id}}
+        placeholder={{this.placeholder}}
+        autocomplete="off"
+        {{on "input" this.updateSearch}}
+        {{on "focus" this.focusDropdown}}
+        class="pix-multi-select-header__search-input"
+      />
+
+    </label>
+  {{else}}
+    <button
+      id={{@id}}
+      type="button"
+      class="pix-multi-select-header {{if this.isBig "pix-multi-select-header--big"}}"
+      {{on "click" this.toggleDropDown}}
+    >
+      {{@title}}
+      <FaIcon
+        class="pix-multi-select-header__dropdown-icon
+          {{if this.isExpanded " pix-multi-select-header__dropdown-icon--expand"}}"
+        @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+      />
+    </button>
+  {{/if}}
+
+  <ul class="pix-multi-select-list {{unless this.isExpanded "pix-multi-select-list--hidden"}}">
+    {{#if (gt this.results.length 0)}}
+      {{#each this.results as |option|}}
+        <li class="pix-multi-select-list__item">
+          <input
+            class="pix-multi-select-list__checkbox
+              {{if @isSearchable " pix-multi-select-list__checkbox--searchable"}}"
+            type="checkbox"
+            checked={{option.checked}}
+            id={{concat @id "-" option.value}}
+            name={{option.label}}
+            value={{option.value}}
+            {{on "change" this.onSelect}}
+          />
+          <label for={{concat @id "-" option.value}}>
+            {{yield option}}
+          </label>
+        </li>
+      {{/each}}
+    {{else if this.isLoadingOptions}}
+      <li
+        class="pix-multi-select-list__item pix-multi-select-list__item--no-result"
+      >{{@loadingMessage}}</li>
+    {{else}}
+      <li
+        class="pix-multi-select-list__item pix-multi-select-list__item--no-result"
+      >{{@emptyMessage}}</li>
+    {{/if}}
+  </ul>
+</div>

package/addon/components/pix-multi-select.js

@@ -0,0 +1,162 @@
+import Component from '@glimmer/component';
+
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+function sortOptionsByCheckedFirst(a, b) {
+  if (a.checked && b.checked) return 0;
+  if (a.checked) return -1;
+  if (b.checked) return 1;
+  return 0;
+}
+
+function removeCapitalizeAndDiacritics(string) {
+  return string
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+}
+
+export default class PixMultiSelect extends Component {
+  @tracked isExpanded = false;
+  @tracked searchData;
+
+  @tracked options = [];
+  @tracked isLoadingOptions = false;
+
+  constructor(...args) {
+    super(...args);
+    const { onLoadOptions, selected } = this.args;
+
+    if (onLoadOptions) {
+      this.isLoadingOptions = true;
+      onLoadOptions().then((options = []) => {
+        this.options = options;
+        this._setDisplayedOptions(selected, true);
+        this.isLoadingOptions = false;
+      });
+    } else {
+      this.options = [...(this.args.options || [])];
+      this._setDisplayedOptions(selected, true);
+    }
+  }
+
+  get label() {
+    const labelIsDefined = this.args.label && this.args.label.trim();
+    const idIsNotDefined = this.args.id && !this.args.id.trim();
+
+    if (labelIsDefined && idIsNotDefined) {
+      throw new Error(
+        'ERROR in PixMultiSelect component, @id param is necessary when giving @label'
+      );
+    }
+    return this.args.label || null;
+  }
+
+  get isBig() {
+    return this.args.size === 'big';
+  }
+
+  get results() {
+    if (this.args.isSearchable && this.searchData) {
+      return this.options.filter(({ label }) => this._search(label));
+    }
+    return this.options;
+  }
+
+  get placeholder() {
+    const { selected, placeholder } = this.args;
+    if (selected?.length > 0) {
+      const selectedOptionLabels = this.options
+        .filter(({ value, label }) => {
+          const hasOption = selected.includes(value);
+          return hasOption && Boolean(label);
+        })
+        .map(({ label }) => label)
+        .join(', ');
+      return selectedOptionLabels;
+    }
+    return placeholder;
+  }
+
+  _setDisplayedOptions(selected, shouldSort) {
+    const options = this.options.map((option) => ({
+      ...option,
+      checked: selected ? selected.includes(option.value) : false,
+    }));
+
+    if (shouldSort && this.args.isSearchable) {
+      options.sort(sortOptionsByCheckedFirst);
+    }
+
+    this.options = options;
+  }
+
+  _search(label) {
+    if (this.args.strictSearch) {
+      return label.includes(this.searchData);
+    }
+    return removeCapitalizeAndDiacritics(label).includes(this.searchData);
+  }
+
+  @action
+  onSelect(event) {
+    let selected = [...(this.args.selected || [])];
+    if (event.target.checked) {
+      selected.push(event.target.value);
+    } else {
+      selected = selected.filter((value) => value !== event.target.value);
+    }
+
+    this._setDisplayedOptions(selected, false);
+
+    if (this.args.onSelect) {
+      this.args.onSelect(selected);
+    }
+  }
+
+  @action
+  toggleDropDown() {
+    if (this.isExpanded) {
+      this.hideDropDown();
+    } else {
+      this.showDropDown();
+    }
+  }
+
+  @action
+  showDropDown() {
+    if (this.isExpanded) return;
+    this.isExpanded = true;
+    this._setDisplayedOptions(this.args.selected, true);
+  }
+
+  @action
+  hideDropDown(event) {
+    if (!this.isExpanded) return;
+
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    this.isExpanded = false;
+  }
+
+  @action
+  focusDropdown() {
+    if (this.args.isSearchable && this.args.showOptionsOnInput) {
+      this.showDropDown();
+    }
+  }
+
+  @action
+  updateSearch(event) {
+    this.searchData = this.args.strictSearch
+      ? event.target.value
+      : removeCapitalizeAndDiacritics(event.target.value);
+    this.isExpanded = true;
+    if (!event.target.value) {
+      this._setDisplayedOptions(this.args.selected, true);
+    }
+  }
+}

package/addon/components/pix-progress-gauge.hbs

@@ -0,0 +1,19 @@
+<div
+  class="progress-gauge
+    {{this.progressGaugeClass}}
+    {{if @isArrowLeft "progress-gauge--tooltip-left"}}"
+  ...attributes
+>
+  <div class="progress-gauge__referrer"></div>
+  <div class="progress-gauge__marker" aria-hidden="true" style={{this.valueGaugeStyle}}></div>
+
+  {{#if @tooltipText}}
+    <div class="progress-gauge__tooltip-wrapper" style={{this.valueGaugeStyle}}>
+      <span class="progress-gauge__tooltip">{{@tooltipText}}</span>
+    </div>
+  {{/if}}
+
+  {{#if this.hasSubtitle}}
+    <p class="progress-gauge__sub-title">{{@subtitle}}</p>
+  {{/if}}
+</div>

package/addon/components/pix-progress-gauge.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/string';
+
+export default class PixProgressGauge extends Component {
+  get progressValue() {
+    if (!this.args.value || this.args.value < 0) {
+      return 0;
+    }
+
+    return this.args.value > 100 ? 100 : this.args.value;
+  }
+
+  get valueGaugeStyle() {
+    return htmlSafe(`width: ${this.progressValue}%`);
+  }
+
+  get hasSubtitle() {
+    return !!this.args.subtitle;
+  }
+
+  get progressGaugeClass() {
+    const availableColor = ['yellow', 'white'];
+
+    const color =
+      this.args.color && availableColor.includes(this.args.color) ? this.args.color : `yellow`;
+
+    return `progress-gauge--${color}`;
+  }
+}

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

@@ -0,0 +1,12 @@
+<div class="pix-radio-button">
+  <label class="{{if @isDisabled " pix-radio-button--disabled"}}">
+    <input
+      disabled={{@isDisabled}}
+      aria-disabled="{{@isDisabled}}"
+      type="radio"
+      value={{@value}}
+      ...attributes
+    />
+    {{@label}}
+  </label>
+</div>

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

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class PixRadioButton extends Component {
+  text = 'pix-radio-button';
+}

package/addon/components/pix-return-to.hbs

@@ -0,0 +1,15 @@
+<LinkTo
+  @route={{this.route}}
+  @models={{if @model (array @model) this.defaultModel}}
+  class="pix-return-to pix-return-to--{{this.shade}}"
+  ...attributes
+>
+
+  {{#if (has-block)}}
+    <span aria-hidden="true" class="pix-return-to__icon"><FaIcon @icon="arrow-left" /></span>
+    <span class="pix-return-to__text"> {{yield}} </span>
+  {{else}}
+    <span title="Flèche de retour" class="pix-return-to__icon"><FaIcon @icon="arrow-left" /></span>
+  {{/if}}
+
+</LinkTo>

package/addon/components/pix-return-to.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+
+export default class PixReturnTo extends Component {
+  text = 'pix-return-to';
+  availableShade = ['black', 'white', 'blue'];
+  defaultModel = [];
+
+  get route() {
+    const routeParam = this.args.route;
+    if (routeParam == undefined || routeParam.trim() == '') {
+      throw new Error('ERROR in PixReturnTo component, @route param is not provided');
+    }
+    return routeParam;
+  }
+
+  get shade() {
+    const shadeParam = this.args.shade;
+    return this.availableShade.includes(shadeParam) ? shadeParam : this.availableShade[0];
+  }
+}

package/addon/components/pix-select.hbs

@@ -0,0 +1,55 @@
+<div class="pix-select">
+
+  {{#if this.label}}
+    <label for={{@id}} class="pix-select__label">{{this.label}}</label>
+  {{/if}}
+
+  {{#if @isSearchable}}
+
+    <input
+      id={{@id}}
+      list="{{this.datalistId}}"
+      {{on "input" this.onChange}}
+      class="{{if this.isValid "pix-select--is-valid"}} {{if this.isBig "pix-select--big"}}"
+      ...attributes
+    />
+
+    <datalist id={{this.datalistId}}>
+      {{#each @options as |opt|}}
+        <option label={{opt.label}}>{{opt.label}}</option>
+      {{/each}}
+    </datalist>
+
+  {{else}}
+
+    <select
+      id={{@id}}
+      class="{{if this.isBig "pix-select--big"}}"
+      {{on "change" this.onChange}}
+      ...attributes
+    >
+      {{#if (not-eq @emptyOptionLabel undefined)}}
+        {{#if @emptyOptionNotSelectable}}
+          <option value="" hidden>{{@emptyOptionLabel}}</option>
+        {{else}}
+          <option value="">{{@emptyOptionLabel}}</option>
+        {{/if}}
+      {{/if}}
+      {{#each @options as |opt|}}
+        {{#if (eq @selectedOption opt.value)}}
+          {{! https://github.com/emberjs/ember.js/issues/15484
+                ember-prop-modifier let us fix a bug about selected attribute in FireFox }}
+          <option value={{opt.value}} {{prop selected="true"}}>
+            {{opt.label}}
+          </option>
+        {{else}}
+          <option value={{opt.value}}>
+            {{opt.label}}
+          </option>
+        {{/if}}
+      {{/each}}
+    </select>
+    <FaIcon class="pix-select__icon" @icon="chevron-down" />
+
+  {{/if}}
+</div>

package/addon/components/pix-select.js

@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class PixSelect extends Component {
+  @tracked isValueAValidOption = false;
+
+  constructor() {
+    super(...arguments);
+
+    if (this.args.isSearchable) {
+      this.datalistId = 'pix-select-list-' + guidFor(this);
+    }
+  }
+
+  get label() {
+    const labelIsDefined = this.args.label?.trim();
+    const idIsNotDefined = !this.args.id?.trim();
+
+    if (labelIsDefined && idIsNotDefined) {
+      throw new Error('ERROR in PixSelect component, @id param is necessary when giving @label');
+    }
+    return this.args.label || null;
+  }
+
+  get isBig() {
+    return this.args.size === 'big';
+  }
+
+  get isValid() {
+    return this.args.isValidationActive && this.isValueAValidOption;
+  }
+
+  @action
+  onChange(event) {
+    if (this.args.onChange) {
+      this.args.onChange(event);
+    }
+
+    if (!this.args.isSearchable || !this.args.options) {
+      return;
+    }
+
+    if (this.args.isValidationActive) {
+      this.isValueAValidOption = _checkIfValueIsAValidOption({
+        value: event.target.value,
+        options: this.args.options,
+      });
+    }
+  }
+}
+
+function _checkIfValueIsAValidOption({ value, options }) {
+  return value
+    ? options.some((option) => option.label.toLowerCase() === value.toLowerCase())
+    : false;
+}

package/addon/components/pix-selectable-tag.hbs

@@ -0,0 +1,10 @@
+<div class="pix-selectable-tag {{if this.isChecked " pix-selectable-tag--checked"}}">
+  <input
+    type="checkbox"
+    id={{@id}}
+    onChange={{this.toggleIsChecked}}
+    checked={{this.isChecked}}
+    ...attributes
+  />
+  <label for={{@id}}>{{@label}}</label>
+</div>

package/addon/components/pix-selectable-tag.js

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class PixSelectableTag extends Component {
+  @tracked isChecked = this.args.checked;
+
+  @action
+  toggleIsChecked() {
+    this.isChecked = !this.isChecked;
+    return this.args.onChange(this.isChecked);
+  }
+}

package/addon/components/pix-stars.hbs

@@ -0,0 +1,16 @@
+<div class={{this.pixStarsClass}} ...attributes>
+  <span class="sr-only">{{@alt}}</span>
+  {{#each this.stars as |star|}}
+    <svg class="pix-stars__{{star}}" data-test-status={{star}} viewBox="0 0 36 36">
+      <defs>
+        <linearGradient id="pix-stars-default" x1="68.643%" y1="0%" x2="68.643%" y2="100%">
+          <stop stop-color="#FEDC41" offset="0%"></stop>
+          <stop stop-color="#FF9F00" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <path
+        d="M8.423 35.82c-.761.507-1.765-.125-1.635-1.03l1.619-11.335L.311 15.36a1.059 1.059 0 01.6-1.796l11.268-1.61L17.027.642c.367-.856 1.58-.856 1.946 0l4.848 11.31 11.269 1.61a1.059 1.059 0 01.599 1.797l-8.096 8.096 1.62 11.334c.129.906-.875 1.538-1.636 1.03L18 29.436 8.423 35.82z"
+      ></path>
+    </svg>
+  {{/each}}
+</div>

package/addon/components/pix-stars.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+
+const STAR_ACQUIRED = 'acquired';
+const STAR_UNACQUIRED = 'unacquired';
+
+export default class PixStars extends Component {
+  get pixStarsClass() {
+    if (!this.args.color) return 'pix-stars';
+    return `pix-stars pix-stars--${this.args.color}`;
+  }
+
+  get stars() {
+    const { count = 0, total = 0 } = this.args;
+
+    const starsTotal = total || count;
+
+    const stars = [];
+    for (let index = 0; index < starsTotal; index++) {
+      if (index < count) {
+        stars[index] = STAR_ACQUIRED;
+      } else {
+        stars[index] = STAR_UNACQUIRED;
+      }
+    }
+    return stars;
+  }
+}

package/addon/components/pix-tag.hbs

@@ -0,0 +1,3 @@
+<div class="pix-tag {{this.classes}}" ...attributes>
+  {{yield}}
+</div>

package/addon/components/pix-tag.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+
+export default class PixTag extends Component {
+  get classes() {
+    const { color, compact } = this.args;
+    const classes = [];
+    if (color) classes.push(`pix-tag--${color}`);
+    if (compact) classes.push(`pix-tag--compact`);
+    return classes.join(' ');
+  }
+}

package/addon/components/pix-textarea.hbs

@@ -0,0 +1,21 @@
+<div class="pix-textarea">
+
+  {{#if this.label}}
+    <label for={{@id}} class="pix-textarea__label">{{this.label}}</label>
+  {{/if}}
+
+  <Textarea
+    id={{@id}}
+    @value={{@value}}
+    maxlength={{if @maxlength @maxlength}}
+    class="{{if @errorMessage "pix-textarea--error"}}"
+    ...attributes
+  />
+  {{#if @maxlength}}
+    <p>{{this.textLengthIndicator}} / {{@maxlength}}</p>
+  {{/if}}
+
+  {{#if @errorMessage}}
+    <label for={{this.id}} class="pix-textarea__error-message">{{@errorMessage}}</label>
+  {{/if}}
+</div>

package/addon/components/pix-textarea.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+export default class PixTextarea extends Component {
+  get textLengthIndicator() {
+    return this.args.value ? this.args.value.length : 0;
+  }
+
+  get label() {
+    const labelIsDefined = this.args.label?.trim();
+    const idIsNotDefined = !this.args.id?.trim();
+
+    if (labelIsDefined && idIsNotDefined) {
+      throw new Error('ERROR in PixTextarea component, @id param is necessary when giving @label');
+    }
+    return this.args.label || null;
+  }
+}

package/addon/components/pix-tooltip-deprecated.hbs

@@ -0,0 +1,18 @@
+<span class="pix-tooltip" ...attributes>
+
+  {{yield}}
+
+  {{#if @text}}
+    <span
+      id={{@id}}
+      role="tooltip"
+      class="pix-tooltip__content pix-tooltip__content--{{this.position}}
+        {{if @isInline "pix-tooltip__content--inline"}}
+        {{if @isLight "pix-tooltip__content--light"}}
+        {{if @isWide "pix-tooltip__content--wide"}}"
+    >
+      {{this.text}}
+    </span>
+  {{/if}}
+
+</span>

package/addon/components/pix-tooltip-deprecated.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+
+export default class PixTooltipDeprecated extends Component {
+  get position() {
+    const correctsPosition = [
+      'top',
+      'right',
+      'bottom',
+      'bottom-left',
+      'bottom-right',
+      'left',
+      'top-left',
+      'top-right',
+    ];
+    return correctsPosition.includes(this.args.position) ? this.args.position : 'top';
+  }
+
+  get text() {
+    if (this.args.unescapeHtml) {
+      return htmlSafe(this.args.text);
+    } else {
+      return this.args.text;
+    }
+  }
+}

package/addon/components/pix-tooltip.hbs

@@ -0,0 +1,18 @@
+<span class="pix-tooltip" ...attributes>
+  {{#if (has-block "triggerElement")}}
+    {{yield to="triggerElement"}}
+  {{/if}}
+
+  {{#if (has-block "tooltip")}}
+    <span
+      id={{@id}}
+      role="tooltip"
+      class="pix-tooltip__content pix-tooltip__content--{{this.position}}
+        {{if @isInline "pix-tooltip__content--inline"}}
+        {{if @isLight "pix-tooltip__content--light"}}
+        {{if @isWide "pix-tooltip__content--wide"}}"
+    >
+      {{yield to="tooltip"}}
+    </span>
+  {{/if}}
+</span>

package/addon/components/pix-tooltip.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+export default class PixTooltip extends Component {
+  get position() {
+    const correctsPosition = [
+      'top',
+      'right',
+      'bottom',
+      'bottom-left',
+      'bottom-right',
+      'left',
+      'top-left',
+      'top-right',
+    ];
+    return correctsPosition.includes(this.args.position) ? this.args.position : 'top';
+  }
+}