@1024pix/pix-ui 58.4.2 → 58.4.4

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

@@ -1,27 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class PixLabelWrapped extends Component {
-  get className() {
-    const classes = ['pix-label', 'pix-label-wrapped'];
-
-    if (this.args.inlineLabel) classes.push('pix-label--inline-label');
-    if (this.args.isDisabled) classes.push('pix-label-wrapped--disabled');
-    if (this.args.variant === 'tile') classes.push('pix-label-wrapped--variant-tile');
-    if (this.args.state === 'success') classes.push('pix-label-wrapped--state-success');
-    if (this.args.state === 'error') classes.push('pix-label-wrapped--state-error');
-
-    const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
-
-    classes.push(`pix-label--${size}`);
-
-    return classes.join(' ');
-  }
-
-  get hasError() {
-    return this.args.state === 'error';
-  }
-
-  get hasSuccess() {
-    return this.args.state === 'success';
-  }
-}

package/addon/components/pix-modal.hbs

@@ -1,33 +0,0 @@
-<PixOverlay
-  @isVisible={{@showModal}}
-  @onClose={{@onCloseButtonClick}}
-  @focusOnClose={{@focusOnClose}}
-  @hasCenteredContent={{true}}
->
-  <div
-    class="pix-modal"
-    role="dialog"
-    aria-labelledby="modal-title--{{this.id}}"
-    aria-describedby="modal-content--{{this.id}}"
-    aria-modal="true"
-    ...attributes
-  >
-    <div class="pix-modal__header">
-      <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
-      <PixIconButton
-        @iconName="close"
-        @triggerAction={{@onCloseButtonClick}}
-        @ariaLabel="Fermer"
-        @size="small"
-        @withBackground={{true}}
-        class="pix-modal__close-button"
-      />
-    </div>
-    <div id="modal-content--{{this.id}}" class="pix-modal__content">
-      {{yield to="content"}}
-    </div>
-    <div class="pix-modal__footer">
-      {{yield to="footer"}}
-    </div>
-  </div>
-</PixOverlay>

package/addon/components/pix-modal.js

@@ -1,16 +0,0 @@
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-
-export default class PixModal extends Component {
-  constructor(...args) {
-    super(...args);
-
-    if (!this.args.title) {
-      throw new Error('ERROR in PixModal component: @title argument is required.');
-    }
-  }
-
-  get id() {
-    return guidFor(this);
-  }
-}

package/addon/components/pix-navigation-separator.hbs

@@ -1 +0,0 @@
-<hr class="pix-navigation-separator" />

package/addon/components/pix-navigation.hbs

@@ -1,43 +0,0 @@
-<aside
-  ...attributes
-  class="pix-navigation
-    {{if this.navigationMenuOpened 'pix-navigation--opened'}}
-    {{if this.shrinkNavigationService.isShrunk 'pix-navigation--shrunk'}}"
->
-  <header class="pix-navigation__brand">{{yield to="brand"}}
-    {{#if this.shrinkNavigationService.canNavigationBeShrunk}}
-      <div class="pix-navigation__shrunk-container">
-        <PixIconButton
-          class="pix-navigation-shrunk-button"
-          @iconName={{this.shrunkNavigationIcon}}
-          @triggerAction={{this.shrinkNavigation}}
-          @ariaLabel="{{this.shrunkNavigationAriaLabel}}"
-        />
-      </div>
-    {{/if}}
-    <div class="pix-navigation__burger-menu"><PixButton
-        aria-controls="{{this.navigationId}} {{this.footerId}}"
-        aria-expanded={{this.navigationMenuOpened}}
-        @iconBefore={{if this.navigationMenuOpened "close" "menu"}}
-        @triggerAction={{this.toggleNavigationMenu}}
-      >
-        <span class="screen-reader-only">
-          {{#if this.navigationMenuOpened}}
-            {{@closeLabel}}
-          {{else}}
-            {{@openLabel}}
-          {{/if}}
-        </span>
-      </PixButton>
-    </div>
-  </header>
-  <nav
-    class="pix-navigation__nav"
-    {{on "click" this.closeNavigation}}
-    aria-label={{@navigationAriaLabel}}
-    id={{this.navigationId}}
-  >
-    {{yield to="navElements"}}
-  </nav>
-  <footer class="pix-navigation__footer" id={{this.footerId}}>{{yield to="footer"}}</footer>
-</aside>

package/addon/components/pix-notification-alert.hbs

@@ -1,13 +0,0 @@
-<p class="pix-notification-alert {{concat 'pix-notification-alert--' this.type}}" ...attributes>
-  {{#if @withIcon}}
-    <PixIcon
-      @name={{this.iconName}}
-      @ariaHidden={{true}}
-      @plainIcon={{true}}
-      class="pix-notification-alert__icon"
-    />
-  {{/if}}
-  <span class="pix-notification-alert__content">
-    {{yield}}
-  </span>
-</p>

package/addon/components/pix-overlay.hbs

@@ -1,11 +0,0 @@
-<div
-  class="pix-overlay
-    {{unless @isVisible ' pix-overlay--hidden'}}
-    {{if @hasCenteredContent ' pix-overlay--with-centered-content'}}"
-  {{on "click" this.onClick}}
-  {{trap-focus @isVisible @focusOnClose}}
-  {{on-escape-action @onClose}}
-  ...attributes
->
-  {{yield}}
-</div>

package/addon/components/pix-overlay.js

@@ -1,13 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-
-export default class PixOverlay extends Component {
-  @action
-  onClick(event) {
-    const isClickOnOverlay = event.target.classList.contains('pix-overlay');
-
-    if (this.args.onClose && isClickOnOverlay) {
-      this.args.onClose(event);
-    }
-  }
-}

package/addon/components/pix-pagination.hbs

@@ -1,52 +0,0 @@
-<footer class={{this.isCondensed}}>
-  <section class="pix-pagination__size">
-    <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
-    <PixSelect
-      @placeholder={{this.pageSize}}
-      @screenReaderOnly={{true}}
-      class="pagination-size__choice"
-      @value={{this.pageSize}}
-      @hideDefaultOption={{true}}
-      @onChange={{this.changePageSize}}
-      @options={{this.pageOptions}}
-    >
-      <:label>{{this.selectPageSizeLabel}}</:label>
-    </PixSelect>
-  </section>
-  <section class="pix-pagination__navigation">
-    <span>
-      {{#if (eq this.pageCount 1)}}
-        {{this.pageResults}}
-      {{else}}
-        {{this.pageInfo}}
-      {{/if}}
-    </span>
-    <div class="pix-pagination-navigation__action">
-      <PixIconButton
-        class="pix-pagination-navigation__action-button"
-        @iconName="arrowLeft"
-        @ariaLabel={{this.previousPageLabel}}
-        @triggerAction={{this.goToPreviousPage}}
-        @withBackground={{false}}
-        @size="big"
-        @color="dark-grey"
-        disabled={{this.isPreviousPageDisabled}}
-        aria-disabled="{{this.isPreviousPageDisabled}}"
-      />
-      <span>
-        {{this.pageNumber}}
-      </span>
-      <PixIconButton
-        class="pix-pagination-navigation__action-button"
-        @iconName="arrowRight"
-        @ariaLabel={{this.nextPageLabel}}
-        @triggerAction={{this.goToNextPage}}
-        @withBackground={{false}}
-        @size="big"
-        @color="dark-grey"
-        disabled={{this.isNextPageDisabled}}
-        aria-disabled="{{this.isNextPageDisabled}}"
-      />
-    </div>
-  </section>
-</footer>

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

@@ -1,19 +0,0 @@
-<div
-  class="progress-bar {{this.themeMode}} {{this.colorClass}}"
-  aria-hidden={{if @isDecorative "true"}}
-  ...attributes
->
-  {{#unless @hidePercentage}}
-    <div class="progress-bar__text" role="presentation">{{this.percentageValue}}</div>
-  {{/unless}}
-  <label for={{this.id}} class="screen-reader-only">{{@label}}</label>
-  <progress
-    class="progress-bar__bar"
-    id={{this.id}}
-    max="100"
-    value={{this.value}}
-  >{{this.value}}%</progress>
-  {{#if @subtitle}}
-    <p class="progress-bar__sub-title">{{@subtitle}}</p>
-  {{/if}}
-</div>

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

@@ -1,37 +0,0 @@
-<div class="pix-radio-button {{@class}}">
-  <PixLabelWrapped
-    @for={{this.id}}
-    @requiredLabel={{@requiredLabel}}
-    @subLabel={{@subLabel}}
-    @size={{@size}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @isDisabled={{this.isDisabled}}
-    @inlineLabel={{true}}
-    @variant={{@variant}}
-    @state={{@state}}
-  >
-    <:inputElement>
-      <input
-        type="radio"
-        id={{this.id}}
-        class={{this.inputClasses}}
-        value={{@value}}
-        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-search-input.hbs

@@ -1,25 +0,0 @@
-<div class="pix-search-input {{if @inlineLabel ' pix-search-input--inline'}}">
-  <PixLabel
-    @for={{this.id}}
-    @requiredLabel={{@requiredLabel}}
-    @subLabel={{@subLabel}}
-    @size={{@size}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @inlineLabel={{@inlineLabel}}
-  >
-    {{yield to="label"}}
-  </PixLabel>
-
-  <div class="pix-search-input__input-container">
-    <PixIcon @name="search" @ariaHidden={{true}} />
-    <input
-      id={{this.id}}
-      class="pix-search-input__input"
-      name={{@inputName}}
-      placeholder={{@placeholder}}
-      value={{this.initialValue}}
-      {{on "input" this.onSearch}}
-      ...attributes
-    />
-  </div>
-</div>

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

@@ -1,115 +0,0 @@
-<ul role="listbox" id={{@listId}} class="pix-select_list" ...attributes>
-  {{#if @displayDefaultOption}}
-    <li
-      class="pix-select-list-category__option{{unless
-          @value
-          ' pix-select-list-category__option--selected'
-        }}"
-      role="option"
-      tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
-      aria-selected={{if @value "false" "true"}}
-      {{on "click" (fn @onChange @defaultOption)}}
-      {{on-enter-action (fn @onChange @defaultOption)}}
-      {{on-space-action (fn @onChange @defaultOption)}}
-    >
-      {{@defaultOptionValue}}
-    </li>
-  {{/if}}
-  {{#if this.results}}
-    {{#if this.displayCategory}}
-      {{#each this.results as |element index|}}
-        <ul
-          class="pix-select-list-category"
-          role="group"
-          aria-labelledby={{if this.displayCategory (concat "cat-" @selectId "-" index)}}
-        >
-          {{#if this.displayCategory}}
-            <li
-              class="pix-select-list-category__name"
-              role="presentation"
-              id={{concat "cat-" @selectId "-" index}}
-              title={{element.label}}
-            >
-              {{element.category}}
-            </li>
-          {{/if}}
-
-          {{#each element.options as |option|}}
-            {{! template-lint-disable require-context-role }}
-            {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
-            <li
-              class="pix-select-list-category__option{{if
-                  (eq option.value @value)
-                  ' pix-select-list-category__option--selected'
-                }}"
-              role="option"
-              tabindex={{if @isExpanded "0" "-1"}}
-              title={{option.label}}
-              aria-selected={{if (eq option.value @value) "true" "false"}}
-              {{on "click" (fn @onChange option)}}
-              {{on-enter-action (fn @onChange option)}}
-              {{on-space-action (fn @onChange option)}}
-            >
-
-              {{#if option.icon}}
-                <PixIcon
-                  role="presentation"
-                  @name={{option.icon}}
-                  @title={{option.iconTitle}}
-                  class="pix-icon--no-shrink"
-                />
-              {{/if}}
-
-              {{option.label}}
-
-              {{#if (eq option.value @value)}}
-                <PixIcon
-                  @name="check"
-                  role="presentation"
-                  class="pix-select-list-category__option-checked"
-                />
-              {{/if}}
-            </li>
-          {{/each}}
-        </ul>
-      {{/each}}
-    {{else}}
-      {{#each this.results as |option|}}
-        <li
-          class="pix-select-list-category__option{{if
-              (eq option.value @value)
-              ' pix-select-list-category__option--selected'
-            }}"
-          role="option"
-          tabindex={{if @isExpanded "0" "-1"}}
-          aria-selected={{if (eq option.value @value) "true" "false"}}
-          title={{option.label}}
-          {{on "click" (fn @onChange option)}}
-          {{on-enter-action (fn @onChange option)}}
-          {{on-space-action (fn @onChange option)}}
-        >
-          {{#if option.icon}}
-            <PixIcon
-              role="presentation"
-              @name={{option.icon}}
-              @title={{option.iconTitle}}
-              class="pix-icon--no-shrink"
-            />
-          {{/if}}
-
-          {{option.label}}
-
-          {{#if (eq option.value @value)}}
-            <PixIcon
-              @name="check"
-              role="presentation"
-              class="pix-select-list-category__option-checked"
-            />
-          {{/if}}
-        </li>
-      {{/each}}
-    {{/if}}
-  {{else}}
-    <li class="pix-select-list__empty-search-message">{{@emptySearchMessage}}</li>
-  {{/if}}
-</ul>

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

@@ -1,41 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class PixSelectList extends Component {
-  get categories() {
-    const uniqueCategories = new Set(
-      ...this.args.options.map((option) => option.category).filter(Boolean),
-    );
-    return Array.from(uniqueCategories.values());
-  }
-
-  get displayCategory() {
-    return this.categories.length > 0;
-  }
-
-  get isDefaultOptionHidden() {
-    return !this.args.isExpanded || this.args.hideDefaultOption;
-  }
-
-  get results() {
-    const results = [];
-    let options = this.args.options;
-
-    if (this.args.searchValue) {
-      options = this.args.options.filter((option) =>
-        option.label.toLowerCase().includes(this.args.searchValue.toLowerCase()),
-      );
-    }
-
-    if (!this.displayCategory) return options;
-
-    options.forEach(({ category, value, label, icon, iconTitle }) => {
-      const categoryIndex = results.findIndex((result) => result.category === category);
-      if (categoryIndex !== -1) {
-        results[categoryIndex].options.push({ value, label, icon, iconTitle });
-      } else {
-        results.push({ category, options: [{ label, value, icon, iconTitle }] });
-      }
-    });
-    return results;
-  }
-}

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

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

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

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

package/addon/components/pix-sidebar.hbs

@@ -1,28 +0,0 @@
-<PixOverlay @isVisible={{@showSidebar}} @onClose={{@onClose}} @focusOnClose={{@focusOnClose}}>
-  <div
-    class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
-    role="dialog"
-    aria-labelledby="sidebar-title--{{this.id}}"
-    aria-describedby="sidebar-content--{{this.id}}"
-    aria-modal="true"
-    ...attributes
-  >
-    <div class="pix-sidebar__header">
-      <h1 id="sidebar-title--{{this.id}}" class="pix-sidebar__title">{{@title}}</h1>
-      <PixIconButton
-        @iconName="close"
-        @triggerAction={{@onClose}}
-        @ariaLabel="Fermer"
-        @size="small"
-        @withBackground={{true}}
-        class="pix-sidebar__close-button"
-      />
-    </div>
-    <div id="sidebar-content--{{this.id}}" class="pix-sidebar__content">
-      {{yield to="content"}}
-    </div>
-    <div class="pix-sidebar__footer">
-      {{yield to="footer"}}
-    </div>
-  </div>
-</PixOverlay>

package/addon/components/pix-sidebar.js

@@ -1,16 +0,0 @@
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-
-export default class PixSidebar extends Component {
-  constructor(...args) {
-    super(...args);
-
-    if (!this.args.title) {
-      throw new Error('ERROR in PixSidebar component: @title argument is required.');
-    }
-  }
-
-  get id() {
-    return guidFor(this);
-  }
-}

package/addon/components/pix-stars.hbs

@@ -1,17 +0,0 @@
-<div class="pix-stars" ...attributes>
-  <span class="screen-reader-only">{{@alt}}</span>
-  {{#each this.starsCount as |item index|}}
-    <svg
-      role="img"
-      class={{this.itemClasses}}
-      data-acquired={{lt index @count}}
-      aria-hidden="true"
-      viewBox="0 0 36 36"
-    >
-      <path
-        d="M19.2828 2.10285L19.2859 2.1094L19.2891 2.11591L23.2657 10.1293C23.7043 11.0131 24.5494 11.6248 25.5259 11.7652L34.3061 13.0281C34.3075 13.0283 34.3089 13.0285 34.3102 13.0287C35.2023 13.1692 35.6257 14.3013 34.8986 15.0326C34.8976 15.0336 34.8966 15.0346 34.8956 15.0356L28.5817 21.2292C27.8785 21.919 27.5588 22.9099 27.7261 23.8806L29.2294 32.5994C29.3684 33.5432 28.3298 34.2646 27.5175 33.8437C27.5166 33.8432 27.5157 33.8428 27.5148 33.8423L19.7026 29.6958C18.8261 29.2305 17.7761 29.2289 16.8981 29.6914L9.01736 33.8423C9.01683 33.8426 9.01631 33.8428 9.01578 33.8431C8.20337 34.2653 7.16367 33.5437 7.30279 32.5994L8.80604 23.8806C8.97339 22.9099 8.65362 21.919 7.95048 21.2292L1.63355 15.0326C0.90651 14.3014 1.32978 13.1695 2.22156 13.0288L11.0636 11.7656C12.0477 11.6251 12.8982 11.0062 13.3347 10.1131L17.2434 2.11512C17.6777 1.2532 18.8988 1.30004 19.2828 2.10285Z"
-        stroke-width="2"
-      ></path>
-    </svg>
-  {{/each}}
-</div>

package/addon/components/pix-stars.js

@@ -1,13 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class PixStars extends Component {
-  get starsCount() {
-    if (!this.args.total && !this.args.count) return [];
-    return this.args.total ? Array(this.args.total) : Array(this.args.count);
-  }
-
-  get itemClasses() {
-    if (!this.args.color) return 'pix-stars__item';
-    return `pix-stars__item pix-stars__item--color-${this.args.color}`;
-  }
-}

package/addon/components/pix-structure-switcher.hbs

@@ -1,41 +0,0 @@
-<div
-  id="container-{{this.switcherId}}"
-  class="pix-structure-switcher"
-  {{on-click-outside this.closeMenu}}
-  {{on-arrow-down-up-action this.listId this.openMenu this.isMenuOpen}}
-  {{on-escape-action this.closeMenu this.switcherId}}
-  {{on "keydown" this.lockTab}}
-  ...attributes
->
-  <PopperJS @placement="right-end" as |reference popover|>
-    <PixButton
-      {{reference}}
-      @size="small"
-      @variant="secondary"
-      aria-controls={{this.listId}}
-      id={{this.switcherId}}
-      @triggerAction={{this.toggleMenu}}
-      aria-expanded={{this.isMenuOpen}}
-    >{{@label}}</PixButton>
-    {{#if this.isMenuOpen}}
-      <div
-        {{popover}}
-        class="pix-select__dropdown {{unless this.isMenuOpen 'pix-select__dropdown--closed'}}"
-      >
-        <PixSelectList
-          aria-labelledby={{this.switcherId}}
-          {{on "transitionend" this.focus}}
-          @hideDefaultOption={{true}}
-          @listId={{this.listId}}
-          @selectId={{this.switcherId}}
-          @value={{@value}}
-          @onChange={{this.onSelectListChange}}
-          @defaultOption={{@defaultOption}}
-          @isExpanded={{this.isMenuOpen}}
-          @options={{@structures}}
-          @defaultOptionValue={{@label}}
-        />
-      </div>
-    {{/if}}
-  </PopperJS>
-</div>

package/addon/components/pix-structure-switcher.js

@@ -1,54 +0,0 @@
-import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-export default class PixStructureSwitcher extends Component {
-  constructor(...args) {
-    super(...args);
-    this.switcherId = 'structure-switcher-' + guidFor(this);
-    this.listId = `listbox-${this.switcherId}`;
-  }
-
-  @tracked
-  isMenuOpen = false;
-
-  @action
-  toggleMenu() {
-    this.isMenuOpen = !this.isMenuOpen;
-  }
-
-  @action
-  onSelectListChange(structure, event) {
-    this.args.onChange(structure);
-    this.closeMenu(event);
-    document.getElementById(this.switcherId).focus();
-  }
-
-  @action
-  openMenu(event) {
-    if (this.isMenuOpen) return;
-
-    event.preventDefault();
-    this.isMenuOpen = true;
-  }
-
-  @action
-  closeMenu(event) {
-    if (!this.isMenuOpen) return;
-
-    event.preventDefault();
-    this.isMenuOpen = false;
-  }
-
-  @action
-  lockTab(event) {
-    if (event.code === 'Tab' && this.isMenuOpen) {
-      event.preventDefault();
-    }
-  }
-
-  @action
-  focus() {
-    document.getElementById(this.listId).querySelector("[aria-selected='true']").focus();
-  }
-}