@1024pix/pix-ui 58.4.2 → 58.4.4

package/addon/components/pix-accordions.gjs

@@ -0,0 +1,81 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import PixIcon from './pix-icon';
+import PixTag from './pix-tag';
+
+export default class PixAccordions extends Component {
+  text = 'pix-accordions';
+  contentId = 'pix-accordions-' + guidFor(this);
+
+  @tracked isCollapsed = true;
+  @tracked hasUnCollapsedOnce = false;
+
+  get isUnCollapsed() {
+    return !this.isCollapsed;
+  }
+
+  get isContentRendered() {
+    return this.hasUnCollapsedOnce;
+  }
+
+  @action
+  toggleAccordions() {
+    this.isCollapsed = !this.isCollapsed;
+    this.hasUnCollapsedOnce = true;
+  }
+
+  <template>
+    <div class="pix-accordions">
+
+      <button
+        class="pix-accordions__title"
+        type="button"
+        {{on "click" this.toggleAccordions}}
+        aria-controls={{this.contentId}}
+        aria-expanded={{if this.isUnCollapsed "true" "false"}}
+        ...attributes
+      >
+
+        <span class="pix-accordions-title__container">
+          {{#if @iconName}}
+            <PixIcon
+              class="pix-accordions-title__icon"
+              @name={{@iconName}}
+              @plainIcon={{@plainIcon}}
+              @ariaHidden={{true}}
+            />
+          {{/if}}
+
+          {{yield to="title"}}
+        </span>
+
+        <span class="pix-accordions-title__container">
+          {{#if @tagContent}}
+            <PixTag @color={{@tagColor}}>
+              {{@tagContent}}
+            </PixTag>
+          {{/if}}
+          <PixIcon
+            class="pix-accordions-title-container__toggle-icon"
+            @ariaHidden={{true}}
+            @name="{{if this.isCollapsed 'chevronBottom' 'chevronTop'}}"
+          />
+        </span>
+      </button>
+
+      <div
+        id={{this.contentId}}
+        class="pix-accordions__content"
+        aria-hidden={{if this.isCollapsed "true" "false"}}
+      >
+        {{#if this.isContentRendered}}
+          {{yield to="content"}}
+        {{/if}}
+      </div>
+    </div>
+  </template>
+}

package/addon/components/pix-app-layout.gjs

@@ -18,7 +18,7 @@ export default class PixAppLayout extends Component {
         const top = bannerHeight / baseFontRemRatio;
 
         const layoutElement = document.querySelector('.pix-app-layout');
-        layoutElement.style.setProperty('--pix-app-layout-top', `${top}rem`);
+        layoutElement?.style.setProperty('--pix-app-layout-top', `${top}rem`);
       }
     }
   }

package/addon/components/pix-background-header.gjs

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+export default class PixBackgroundHeaderComponent extends Component {
+  text = 'pix-background-header';
+
+  <template>
+    <div class="pix-background-header" ...attributes>
+      <div class="pix-background-header__background"></div>
+
+      <div class="pix-background-header__content">
+        {{yield}}
+      </div>
+    </div>
+  </template>
+}

package/addon/components/{pix-banner-alert.js → pix-banner-alert.gjs}

@@ -1,6 +1,11 @@
 import { action } from '@ember/object';
+import { LinkTo } from '@ember/routing';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+
+import PixIcon from './pix-icon';
+import PixIconButton from './pix-icon-button';
+
 const TYPE_INFO = 'information';
 const TYPE_ERROR = 'error';
 const TYPE_WARNING = 'warning';
@@ -62,4 +67,48 @@ export default class PixBannerAlert extends Component {
     }
     this.isBannerVisible = false;
   }
+
+  <template>
+    {{#if this.displayBanner}}
+      <div class="pix-banner-alert pix-banner-alert--{{this.type}}" role="alert" ...attributes>
+        <PixIcon
+          @name={{this.icon}}
+          @plainIcon={{true}}
+          @ariaHidden={{true}}
+          class="pix-banner-alert__icon"
+        />
+        <div>
+          {{yield}}
+          {{#if this.displayAction}}
+            {{#if this.isExternalLink}}
+              <a
+                class="pix-banner-alert__action"
+                href={{@actionUrl}}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {{@actionLabel}}
+                <PixIcon @name="openNew" class="external-link" @ariaHidden={{true}} />
+              </a>
+            {{else}}
+              <LinkTo
+                class="pix-banner-alert__action"
+                @route={{@actionUrl}}
+              >{{@actionLabel}}</LinkTo>
+            {{/if}}
+          {{/if}}
+        </div>
+        {{#if this.canCloseBanner}}
+          <div class="pix-banner-alert__close">
+            <PixIconButton
+              @ariaLabel="Fermer"
+              @iconName="close"
+              @size="small"
+              @triggerAction={{this.closeBanner}}
+            />
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </template>
 }

package/addon/components/{pix-block.js → pix-block.gjs}

@@ -15,4 +15,22 @@ export default class PixBlockComponent extends Component {
 
     return value;
   }
+
+  get cssClass() {
+    const cssClass = ['pix-block', `pix-block--${this.variant}`];
+
+    if (this.args.condensed) {
+      cssClass.push('pix-block--condensed');
+    }
+
+    return cssClass.join(' ');
+  }
+
+  <template>
+    <div class={{this.cssClass}} ...attributes>
+
+      {{yield}}
+
+    </div>
+  </template>
 }

package/addon/components/pix-breadcrumb.gjs

@@ -0,0 +1,40 @@
+import { array } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
+import Component from '@glimmer/component';
+
+import PixIcon from './pix-icon';
+
+export default class PixBreadcrumb extends Component {
+  defaultModel = [];
+
+  get links() {
+    return this.args.links.map((link) => ({
+      ...link,
+      label: link.label.trim(),
+    }));
+  }
+
+  <template>
+    <nav class="pix-breadcrumb" ...attributes>
+      <ol>
+        {{#each this.links as |link|}}
+          {{#if link.route}}
+            <li>
+              <LinkTo
+                @route={{link.route}}
+                @models={{if link.model (array link.model) this.defaultModel}}
+              >
+                {{link.label}}
+              </LinkTo>
+              <PixIcon @name="chevronRight" @ariaHidden={{true}} />
+            </li>
+          {{else}}
+            <li aria-current="page">
+              <p>{{link.label}}</p>
+            </li>
+          {{/if}}
+        {{/each}}
+      </ol>
+    </nav>
+  </template>
+}

package/addon/components/pix-button/pix-button-content.gjs

@@ -0,0 +1,21 @@
+import PixIcon from '../pix-icon';
+
+<template>
+  {{#if @iconBefore}}
+    <PixIcon
+      class="pix-button__icon pix-button__icon--before"
+      @ariaHidden={{true}}
+      @name={{@iconBefore}}
+      @plainIcon={{@plainIconBefore}}
+    />
+  {{/if}}
+  {{yield}}
+  {{#if @iconAfter}}
+    <PixIcon
+      class="pix-button__icon pix-button__icon--after"
+      @name={{@iconAfter}}
+      @ariaHidden={{true}}
+      @plainIcon={{@plainIconAfter}}
+    />
+  {{/if}}
+</template>

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

@@ -0,0 +1,49 @@
+import { array } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
+
+import PixButtonContent from './pix-button/pix-button-content';
+import PixButtonBase from './pix-button-base';
+
+export default class PixButtonLink extends PixButtonBase {
+  defaultModel = [];
+  defaultParams = {};
+
+  get className() {
+    return super.baseClassNames.join(' ');
+  }
+
+  <template>
+    {{#if @route}}
+      <LinkTo
+        @route={{@route}}
+        @models={{if @model (array @model) this.defaultModel}}
+        @disabled={{@isDisabled}}
+        @query={{if @query @query this.defaultParams}}
+        class={{this.className}}
+        aria-disabled="{{@isDisabled}}"
+        ...attributes
+      >
+        <PixButtonContent
+          @iconBefore={{@iconBefore}}
+          @iconAfter={{@iconAfter}}
+          @plainIconAfter={{@plainIconAfter}}
+          @plainIconBefore={{@plainIconBefore}}
+        >
+          {{yield}}
+        </PixButtonContent>
+      </LinkTo>
+    {{else}}
+      {{! template-lint-disable no-unsupported-role-attributes }}
+      <a href={{@href}} class={{this.className}} aria-disabled="{{@isDisabled}}" ...attributes>
+        <PixButtonContent
+          @iconBefore={{@iconBefore}}
+          @iconAfter={{@iconAfter}}
+          @plainIconAfter={{@plainIconAfter}}
+          @plainIconBefore={{@plainIconBefore}}
+        >
+          {{yield}}
+        </PixButtonContent>
+      </a>
+    {{/if}}
+  </template>
+}

package/addon/components/{pix-button-upload.js → pix-button-upload.gjs}

@@ -1,3 +1,4 @@
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
@@ -18,4 +19,18 @@ export default class PixButtonUpload extends PixButtonBase {
     }
     this.files = [];
   }
+
+  <template>
+    <label for={{@id}} class={{this.className}} role="button">
+      {{yield}}
+    </label>
+    <input
+      id={{@id}}
+      type="file"
+      class="screen-reader-only"
+      value={{this.files}}
+      {{on "change" this.handleChange}}
+      ...attributes
+    />
+  </template>
 }

package/addon/components/{pix-button.js → pix-button.gjs}

@@ -1,7 +1,9 @@
 import { warn } from '@ember/debug';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
+import PixButtonContent from './pix-button/pix-button-content';
 import PixButtonBase from './pix-button-base';
 export default class PixButton extends PixButtonBase {
   text = 'pix-button';
@@ -76,4 +78,32 @@ export default class PixButton extends PixButtonBase {
       this.isTriggering = false;
     }
   }
+
+  <template>
+    <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>
+  </template>
 }

package/addon/components/{pix-checkbox.js → pix-checkbox.gjs}

@@ -1,10 +1,11 @@
 import { warn } from '@ember/debug';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 
 import { formatMessage } from '../translations';
-
+import PixLabelWrapped from './pix-label-wrapped';
 export default class PixCheckbox extends Component {
   constructor() {
     super(...arguments);
@@ -70,4 +71,44 @@ export default class PixCheckbox extends Component {
   formatMessage(message) {
     return formatMessage(this.args.locale ?? 'fr', `input.${message}`);
   }
+
+  <template>
+    <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>
+  </template>
 }

package/addon/components/pix-code.gjs

@@ -0,0 +1,59 @@
+import { warn } from '@ember/debug';
+import { htmlSafe } from '@ember/template';
+
+import PixInputBase from './pix-input-base';
+import PixLabel from './pix-label';
+
+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);
+  }
+
+  <template>
+    <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>
+  </template>
+}

package/addon/components/{pix-filterable-and-searchable-select.js → pix-filterable-and-searchable-select.gjs}

@@ -4,6 +4,10 @@ import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
+import PixLabel from './pix-label';
+import PixMultiSelect from './pix-multi-select';
+import PixSelect from './pix-select';
+
 export default class PixFilterableAndSearchableSelect extends Component {
   @service elementHelper;
   @tracked selectedCategories = [];
@@ -71,4 +75,55 @@ export default class PixFilterableAndSearchableSelect extends Component {
 
     return selectableOptions;
   }
+
+  <template>
+    <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>
+  </template>
 }