@nectary/components 3.3.4 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion-item/index.js +1 -1
- package/alert/index.js +1 -1
- package/button-group/types.d.ts +1 -0
- package/chip/index.js +1 -1
- package/date-picker/index.js +1 -1
- package/dialog/index.js +1 -1
- package/emoji-picker/index.js +1 -1
- package/file-status/index.js +1 -1
- package/help-tooltip/index.js +1 -1
- package/horizontal-stepper-item/index.js +1 -1
- package/icon/generated-icon-type.d.ts +1 -0
- package/icon/generated-icon-type.js +1 -0
- package/icon/index.js +13 -1
- package/icon/types.d.ts +8 -2
- package/inline-alert/index.js +1 -1
- package/link/index.js +1 -1
- package/package.json +3 -2
- package/pagination/index.js +1 -1
- package/progress-stepper-item/index.d.ts +1 -0
- package/progress-stepper-item/index.js +2 -1
- package/segment-collapse/index.js +1 -1
- package/select-button/index.js +1 -1
- package/select-menu/index.js +1 -1
- package/select-menu-option/index.js +1 -1
- package/standalone.d.ts +3 -0
- package/standalone.js +3 -0
- package/standalone.ts +3 -0
- package/time-picker/index.js +1 -1
- package/toast/index.js +1 -1
- package/types.d.ts +1 -1
- package/vertical-stepper-item/index.js +1 -1
package/accordion-item/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import '../icon';
|
|
|
2
2
|
import '../text';
|
|
3
3
|
import '../title';
|
|
4
4
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:0 4px 0 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon
|
|
5
|
+
const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:0 4px 0 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
|
|
6
6
|
import { statusValues } from './utils';
|
|
7
7
|
const template = document.createElement('template');
|
|
8
8
|
template.innerHTML = templateHTML;
|
package/alert/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import '../icon';
|
|
|
2
2
|
import '../rich-text';
|
|
3
3
|
import '../text';
|
|
4
4
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-alert-color-info-default-background)}#icon-error,#icon-info,#icon-warn{display:none}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=warn]) #icon-warn{display:block}#text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;--sinch-comp-rich-text-font:var(--sinch-comp-alert-font-body)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-info-default-text)}</style><div id="wrapper"><sinch-icon
|
|
5
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-alert-color-info-default-background)}#icon-error,#icon-info,#icon-warn{display:none}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=warn]) #icon-warn{display:block}#text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;--sinch-comp-rich-text-font:var(--sinch-comp-alert-font-body)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-info-default-text)}</style><div id="wrapper"><sinch-icon name="circle-info" id="icon-info"></sinch-icon><sinch-icon name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
|
|
6
6
|
import { typeValues } from './utils';
|
|
7
7
|
const template = document.createElement('template');
|
|
8
8
|
template.innerHTML = templateHTML;
|
package/button-group/types.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { TSinchButtonElement, TSinchButtonReact } from '../button/types';
|
|
2
2
|
import type { TSinchElementReact } from '../types';
|
|
3
|
+
export { TSinchButtonReact };
|
|
3
4
|
export type TSinchButtonGroupElement = HTMLElement & {
|
|
4
5
|
size: TSinchButtonElement['size'];
|
|
5
6
|
type: TSinchButtonElement['type'];
|
package/chip/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../text';
|
|
2
2
|
import '../icon';
|
|
3
3
|
import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, isAttrTrue, isAttrEqual } from '../utils';
|
|
4
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon
|
|
4
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon name="circle-cross" id="icon-close"></sinch-icon></slot></div>';
|
|
5
5
|
import { getChipColorBg, getChipColorFg } from './utils';
|
|
6
6
|
const template = document.createElement('template');
|
|
7
7
|
template.innerHTML = templateHTML;
|
package/date-picker/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../icon';
|
|
2
2
|
import '../text';
|
|
3
3
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, getTargetAttribute, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
4
|
-
const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-comp-date-picker-font-day);width:24px;height:24px;line-height:22px;color:var(--sinch-comp-date-picker-day-color-default-text-initial);background-color:var(--sinch-comp-date-picker-day-color-default-background-initial);border:1px solid var(--sinch-comp-date-picker-day-color-default-border-initial);border-radius:var(--sinch-comp-date-picker-day-shape-radius);text-align:center;box-sizing:border-box;user-select:none;cursor:pointer}.day:focus-visible{outline:1px solid var(--sinch-comp-date-picker-day-color-default-outline-focus);outline-offset:1px}.day:disabled{cursor:initial;color:var(--sinch-comp-date-picker-day-color-disabled-text-initial)}.day:enabled:hover{background-color:var(--sinch-comp-date-picker-day-color-default-background-hover)}.day:enabled.range{background-color:var(--sinch-comp-date-picker-day-color-default-range-background)}.day:enabled.selected{color:var(--sinch-comp-date-picker-day-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-day-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-day-color-checked-border-initial)}.day.today{font:var(--sinch-comp-date-picker-font-today);color:var(--sinch-comp-date-picker-today-color-default-text-initial);background-color:var(--sinch-comp-date-picker-today-color-default-background-initial);border-color:var(--sinch-comp-date-picker-today-color-default-border-initial)}.day.today:hover{background-color:var(--sinch-comp-date-picker-today-color-default-background-hover)}.day.today:disabled{color:var(--sinch-comp-date-picker-today-color-disabled-text-initial);border-color:var(--sinch-comp-date-picker-today-color-disabled-border-initial)}.day.today.selected{color:var(--sinch-comp-date-picker-today-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-today-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-today-color-checked-border-initial)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-comp-date-picker-font-weekday);color:var(--sinch-comp-date-picker-weekday-color-default-text-initial);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize;--sinch-com-text-font:var(--sinch-comp-date-picker-font-header);--sinch-global-color-text:var(--sinch-comp-date-picker-header-color-default-text-initial)}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon"
|
|
4
|
+
const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-comp-date-picker-font-day);width:24px;height:24px;line-height:22px;color:var(--sinch-comp-date-picker-day-color-default-text-initial);background-color:var(--sinch-comp-date-picker-day-color-default-background-initial);border:1px solid var(--sinch-comp-date-picker-day-color-default-border-initial);border-radius:var(--sinch-comp-date-picker-day-shape-radius);text-align:center;box-sizing:border-box;user-select:none;cursor:pointer}.day:focus-visible{outline:1px solid var(--sinch-comp-date-picker-day-color-default-outline-focus);outline-offset:1px}.day:disabled{cursor:initial;color:var(--sinch-comp-date-picker-day-color-disabled-text-initial)}.day:enabled:hover{background-color:var(--sinch-comp-date-picker-day-color-default-background-hover)}.day:enabled.range{background-color:var(--sinch-comp-date-picker-day-color-default-range-background)}.day:enabled.selected{color:var(--sinch-comp-date-picker-day-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-day-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-day-color-checked-border-initial)}.day.today{font:var(--sinch-comp-date-picker-font-today);color:var(--sinch-comp-date-picker-today-color-default-text-initial);background-color:var(--sinch-comp-date-picker-today-color-default-background-initial);border-color:var(--sinch-comp-date-picker-today-color-default-border-initial)}.day.today:hover{background-color:var(--sinch-comp-date-picker-today-color-default-background-hover)}.day.today:disabled{color:var(--sinch-comp-date-picker-today-color-disabled-text-initial);border-color:var(--sinch-comp-date-picker-today-color-disabled-border-initial)}.day.today.selected{color:var(--sinch-comp-date-picker-today-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-today-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-today-color-checked-border-initial)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-comp-date-picker-font-weekday);color:var(--sinch-comp-date-picker-weekday-color-default-text-initial);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize;--sinch-com-text-font:var(--sinch-comp-date-picker-font-header);--sinch-global-color-text:var(--sinch-comp-date-picker-header-color-default-text-initial)}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-button id="prev-year" size="s"><sinch-icon name="fa-angles-left" id="icon-prev-year" slot="icon"></sinch-icon></sinch-button><sinch-button id="prev-month" size="s"><sinch-icon name="fa-angle-left" id="icon-prev-month" slot="icon"></sinch-icon></sinch-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-button id="next-month" size="s"><sinch-icon name="fa-angle-right" id="icon-next-month" slot="icon"></sinch-icon></sinch-button><sinch-button id="next-year" size="s"><sinch-icon name="fa-angles-right" id="icon-next-year" slot="icon"></sinch-icon></sinch-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
|
|
5
5
|
import { areDatesEqual, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isDateOnScreen, isoToDate, isValidDate, sortDates, today } from './utils';
|
|
6
6
|
const template = document.createElement('template');
|
|
7
7
|
template.innerHTML = templateHTML;
|
package/dialog/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import '../icon';
|
|
|
2
2
|
import '../stop-events';
|
|
3
3
|
import '../title';
|
|
4
4
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual, isAttrEqual } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon id="icon-close" slot="icon"
|
|
5
|
+
const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
|
|
6
6
|
import { disableScroll, enableScroll } from './utils';
|
|
7
7
|
const template = document.createElement('template');
|
|
8
8
|
template.innerHTML = templateHTML;
|
package/emoji-picker/index.js
CHANGED
|
@@ -11,7 +11,7 @@ import '../icon';
|
|
|
11
11
|
import { getEmojiBaseUrl, setEmojiBaseUrl } from '../emoji/utils';
|
|
12
12
|
import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, debounceTimeout, setClass } from '../utils';
|
|
13
13
|
import dataJson from './data.json';
|
|
14
|
-
const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}sinch-tabs-icon-option>svg{pointer-events:none;height:var(--sinch-global-size-icon);fill:var(--sinch-global-color-icon)}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon"
|
|
14
|
+
const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}sinch-tabs-icon-option>svg{pointer-events:none;height:var(--sinch-global-size-icon);fill:var(--sinch-global-color-icon)}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right" aria-label="Clear"><sinch-icon name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skintone-default"></sinch-color-swatch></sinch-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skintone-default" aria-label="Emoji skin tone menu"><sinch-color-menu-option value="skintone-default"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium-dark"></sinch-color-menu-option><sinch-color-menu-option value="skintone-dark"></sinch-color-menu-option></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"><sinch-tabs-icon-option id="tab-emotions"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm4.41-6.11a.745.745 0 0 0-1.03.24A3.98 3.98 0 0 1 12 16c-1.38 0-2.64-.7-3.38-1.88a.747.747 0 1 0-1.27.79A5.446 5.446 0 0 0 12 17.5c1.9 0 3.63-.97 4.65-2.58.22-.35.11-.81-.24-1.03Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-people"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54a5.023 5.023 0 0 1-4.92-4.15.998.998 0 0 0-.98-.85c-.61 0-1.09.54-1 1.14A7.037 7.037 0 0 0 9 8.71V21c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V10.05l3.24 3.24a.996.996 0 1 0 1.41-1.41l-3.76-3.77Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-animals"><svg slot="icon" viewBox="0 0 24 24"><path d="M17 14c-.24-.24-.44-.49-.65-.75C17.51 11.5 19 8.56 19 5c0-1.95-.74-3-2-3-1.54 0-3.96 2.06-5 5.97C10.96 4.06 8.54 2 7 2 5.74 2 5 3.05 5 5c0 3.56 1.49 6.5 2.65 8.25-.21.26-.41.51-.65.75-.25.25-2 1.39-2 3.5C5 19.98 7.02 22 9.5 22c1.5 0 2.5-.5 2.5-.5s1 .5 2.5.5c2.48 0 4.5-2.02 4.5-4.5 0-2.11-1.75-3.25-2-3.5Zm-.12-9.97c.06.17.12.48.12.97 0 2.84-1.11 5.24-2.07 6.78-.38-.26-.83-.48-1.4-.62.24-4.52 2.44-6.83 3.35-7.13ZM7 5c0-.49.06-.8.12-.97.91.3 3.11 2.61 3.36 7.13-.58.14-1.03.35-1.4.62C8.11 10.24 7 7.84 7 5Zm7.5 15c-1 0-1.8-.33-2.22-.56.42-.18.72-.71.72-.94 0-.28-.45-.5-1-.5s-1 .22-1 .5c0 .23.3.76.72.94-.42.23-1.22.56-2.22.56A2.5 2.5 0 0 1 7 17.5c0-.7.43-1.24 1-1.73.44-.36.61-.52 1.3-1.37.76-.95 1.09-1.4 2.7-1.4s1.94.45 2.7 1.4c.69.85.86 1.01 1.3 1.37.57.49 1 1.03 1 1.73a2.5 2.5 0 0 1-2.5 2.5Zm-.5-4c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Zm-3 0c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-food"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 19H3c-.55 0-1 .45-1 1s.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1Zm1-16H9v2.4l1.81 1.45c.12.09.19.24.19.39v4.26c0 .28-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5V7.24c0-.15.07-.3.19-.39L8 5.4V3H6c-1.1 0-2 .9-2 2v8c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 5h-2V5h2v3Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-travel"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m21.99 14.77-1.43-4.11c-.14-.4-.52-.66-.97-.66H12.4c-.46 0-.83.26-.98.66L10 14.77v5.24c0 .55.45.99 1 .99s1-.45 1-1v-1h8v1a1 1 0 0 0 2 .01l-.01-5.24Zm-10.38-1.43.69-2c.05-.2.24-.34.46-.34h6.48c.21 0 .4.14.47.34l.69 2a.5.5 0 0 1-.47.66h-7.85a.5.5 0 0 1-.47-.66Zm.38 3.66c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Z"/><path d="M14 4.5V9h1V4c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v4H3c-.55 0-1 .45-1 1v12h1V9.5c0-.28.22-.5.5-.5h4c.28 0 .5-.22.5-.5v-4c0-.28.22-.5.5-.5h5c.28 0 .5.22.5.5Z"/><path d="M7 11H5v2h2v-2Zm5-6h-2v2h2V5ZM7 15H5v2h2v-2Zm0 4H5v2h2v-2Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-sports"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.52 2.49C17.18.15 12.9.62 9.97 3.55c-1.6 1.6-2.52 3.87-2.54 5.46-.02 1.58.26 3.89-1.35 5.5l-3.54 3.53c-.39.39-.39 1.02 0 1.42.39.39 1.02.39 1.42 0l3.53-3.54c1.61-1.61 3.92-1.33 5.5-1.35 1.58-.02 3.86-.94 5.46-2.54 2.93-2.92 3.41-7.2 1.07-9.54Zm-9.2 9.19c-1.53-1.53-1.05-4.61 1.06-6.72 2.11-2.11 5.18-2.59 6.72-1.06 1.53 1.53 1.05 4.61-1.06 6.72-2.11 2.11-5.18 2.59-6.72 1.06ZM18 17c.53 0 1.04.21 1.41.59.78.78.78 2.05 0 2.83-.37.37-.88.58-1.41.58-.53 0-1.04-.21-1.41-.59-.78-.78-.78-2.05 0-2.83.37-.37.88-.58 1.41-.58Zm0-2a3.998 3.998 0 0 0-2.83 6.83c.78.78 1.81 1.17 2.83 1.17a3.998 3.998 0 0 0 2.83-6.83A3.998 3.998 0 0 0 18 15Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-objects"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 0 0 3.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0 0 19 10c0-3.87-3.13-7-7-7Zm.5 11h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71-1.83 1.83V14Zm1 5c-.01 0-.02-.01-.03-.01V19h-2.94v-.01c-.01 0-.02.01-.03.01-.28 0-.5-.22-.5-.5s.22-.5.5-.5c.01 0 .02.01.03.01V18h2.94v.01c.01 0 .02-.01.03-.01.28 0 .5.22.5.5s-.22.5-.5.5Zm0-2h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5s-.22.5-.5.5Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-symbols"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 5H4c-.55 0-1 .45-1 1s.45 1 1 1h2v3c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1Zm0-3H4c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Zm10.89 11.11a.996.996 0 0 0-1.41 0l-6.36 6.36a.996.996 0 1 0 1.41 1.41l6.36-6.36a.996.996 0 0 0 0-1.41ZM14.5 16a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-4-10A2.5 2.5 0 0 0 18 8.5V4h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1v3.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 0 0 0 5Zm-5.05 7.09a.996.996 0 1 0-1.41-1.41l-.71.71-.71-.71.35-.35a2.499 2.499 0 0 0-1.77-4.27 2.499 2.499 0 0 0-1.77 4.27l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.48 1.14.72 1.78.72.64 0 1.28-.24 1.77-.73l1.06-1.06.71.71a.996.996 0 1 0 1.41-1.41l-.71-.71.71-.71Zm-4.6-3.89a.5.5 0 0 1 .35-.15.5.5 0 0 1 .35.15c.19.2.19.51 0 .71l-.35.35-.35-.36a.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35Zm0 5.65a.5.5 0 0 1-.35.15.5.5 0 0 1-.35-.15.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35l1.06-1.06.71.71-1.07 1.05Z"/></svg></sinch-tabs-icon-option></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
|
|
15
15
|
const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
|
|
16
16
|
const data = dataJson;
|
|
17
17
|
const template = document.createElement('template');
|
package/file-status/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import '../spinner';
|
|
|
2
2
|
import '../icon';
|
|
3
3
|
import '../text';
|
|
4
4
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;border-radius:var(--sinch-comp-file-status-shape-radius)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-file-status-color-error-background)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-file-status-color-success-background)}:host([type=pending]) #wrapper{background-color:var(--sinch-comp-file-status-color-pending-background)}:host([type=progress]) #wrapper{background-color:var(--sinch-comp-file-status-color-progress-background)}:host([type=loading]) #wrapper{background-color:var(--sinch-comp-file-status-color-loading-background)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px}:host([type=error]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-error-text)}:host([type=success]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-success-text)}:host([type=pending]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-pending-text)}:host([type=progress]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-progress-text)}:host([type=loading]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-loading-text)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#icon-pending{--sinch-global-color-icon:var(--sinch-comp-file-status-color-pending-icon)}#icon-success{--sinch-global-color-icon:var(--sinch-comp-file-status-color-success-icon)}#icon-progress{--sinch-global-color-icon:var(--sinch-comp-file-status-color-progress-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-file-status-color-error-icon)}#icon-loading{--sinch-global-color-icon:var(--sinch-comp-file-status-color-loading-icon)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon
|
|
5
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;border-radius:var(--sinch-comp-file-status-shape-radius)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-file-status-color-error-background)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-file-status-color-success-background)}:host([type=pending]) #wrapper{background-color:var(--sinch-comp-file-status-color-pending-background)}:host([type=progress]) #wrapper{background-color:var(--sinch-comp-file-status-color-progress-background)}:host([type=loading]) #wrapper{background-color:var(--sinch-comp-file-status-color-loading-background)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px}:host([type=error]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-error-text)}:host([type=success]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-success-text)}:host([type=pending]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-pending-text)}:host([type=progress]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-progress-text)}:host([type=loading]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-loading-text)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#icon-pending{--sinch-global-color-icon:var(--sinch-comp-file-status-color-pending-icon)}#icon-success{--sinch-global-color-icon:var(--sinch-comp-file-status-color-success-icon)}#icon-progress{--sinch-global-color-icon:var(--sinch-comp-file-status-color-progress-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-file-status-color-error-icon)}#icon-loading{--sinch-global-color-icon:var(--sinch-comp-file-status-color-loading-icon)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon name="fa-clipboard-question" id="icon-pending"></sinch-icon><sinch-icon name="circle-check" id="icon-success"></sinch-icon><sinch-icon name="fa-file-lines" id="icon-progress"></sinch-icon><sinch-icon name="octagon-exclamation" id="icon-error"></sinch-icon><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
|
|
6
6
|
import { typeValues } from './utils';
|
|
7
7
|
const template = document.createElement('template');
|
|
8
8
|
template.innerHTML = templateHTML;
|
package/help-tooltip/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../tooltip';
|
|
2
2
|
import '../icon';
|
|
3
3
|
import { defineCustomElement, getAttribute, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
|
|
4
|
-
const templateHTML = '<style>:host{display:contents}#icon{--sinch-global-size-icon:18px}</style><sinch-tooltip type="fast"><sinch-icon
|
|
4
|
+
const templateHTML = '<style>:host{display:contents}#icon{--sinch-global-size-icon:18px}</style><sinch-tooltip type="fast"><sinch-icon name="circle-question" id="icon"></sinch-icon></sinch-tooltip>';
|
|
5
5
|
const template = document.createElement('template');
|
|
6
6
|
template.innerHTML = templateHTML;
|
|
7
7
|
defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
|
|
@@ -2,7 +2,7 @@ import '../icon';
|
|
|
2
2
|
import '../title';
|
|
3
3
|
import '../text';
|
|
4
4
|
import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;min-height:64px;display:flex;flex-direction:column}#circle{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;background-color:var(--sinch-local-color-background);font:var(--sinch-sys-font-desktop-title-s);line-height:32px;text-align:center;color:var(--sinch-local-color-text);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-default);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-default);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-default);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-default);--sinch-global-size-icon:20px}:host([data-progress=active]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-active);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-active);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-active);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-active)}:host([data-progress=done]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited)}:host([data-progress=done][status=error]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited-error);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited-error);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited-error);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited-error)}:host([data-progress=done][status=skip]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited-skip);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited-skip);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited-skip);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited-skip)}#icon-error,#icon-success{display:none}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}#label{text-align:center;margin-top:8px;--sinch-global-color-text:var(--sinch-comp-horizontal-stepper-color-label)}#description{text-align:center;--sinch-global-color-text:var(--sinch-comp-horizontal-stepper-color-description)}</style><div id="wrapper"><div id="circle" aria-hidden="true"><sinch-icon
|
|
5
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;min-height:64px;display:flex;flex-direction:column}#circle{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;background-color:var(--sinch-local-color-background);font:var(--sinch-sys-font-desktop-title-s);line-height:32px;text-align:center;color:var(--sinch-local-color-text);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-default);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-default);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-default);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-default);--sinch-global-size-icon:20px}:host([data-progress=active]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-active);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-active);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-active);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-active)}:host([data-progress=done]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited)}:host([data-progress=done][status=error]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited-error);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited-error);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited-error);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited-error)}:host([data-progress=done][status=skip]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited-skip);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited-skip);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited-skip);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited-skip)}#icon-error,#icon-success{display:none}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}#label{text-align:center;margin-top:8px;--sinch-global-color-text:var(--sinch-comp-horizontal-stepper-color-label)}#description{text-align:center;--sinch-global-color-text:var(--sinch-comp-horizontal-stepper-color-description)}</style><div id="wrapper"><div id="circle" aria-hidden="true"><sinch-icon name="fa-check" id="icon-success"></sinch-icon><sinch-icon name="fa-exclamation" id="icon-error"></sinch-icon><span id="circle-text"></span></div><sinch-title id="label" type="s" ellipsis></sinch-title><sinch-text id="description" type="xs" ellipsis></sinch-text></div>';
|
|
6
6
|
import { statusValues } from './utils';
|
|
7
7
|
const template = document.createElement('template');
|
|
8
8
|
template.innerHTML = templateHTML;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type TSinchIcons = 'ai' | 'alarm-clock' | 'anchor' | 'arrows-dots-clockwise' | 'badge-percent' | 'ball-basketball' | 'ball-tennis' | 'basket-shopping' | 'bell-circle-clock' | 'bell-circle-exclamation' | 'bell-circle' | 'bell-slash' | 'bell' | 'book-bookmark' | 'book-open-ai' | 'book-open' | 'box-archive' | 'brain-chip' | 'briefcase' | 'building-office' | 'calendar-lines' | 'camera-waves' | 'camera' | 'car' | 'cart-shopping' | 'chart-pie-simple' | 'chess-knight' | 'chip-gear' | 'chip' | 'circle-check' | 'circle-cross' | 'circle-dollar-rotate-left' | 'circle-dollar' | 'circle-exclamation' | 'circle-info' | 'circle-question' | 'circle-slash' | 'clipboard-list' | 'clock-rotate-left' | 'clock-rotate-right' | 'clock-three' | 'cloud-arrow-down' | 'cloud-circle-call' | 'cloud-phone' | 'cloud' | 'clouds' | 'crown' | 'database-circle-call' | 'database-circle-check' | 'document-ai' | 'dots-connected-speech-bubble' | 'dots-horizontal' | 'dream-big' | 'earth-americas' | 'earth-grid' | 'envelope-clock' | 'envelope-open' | 'envelope' | 'eye' | 'fa-0' | 'fa-00' | 'fa-1' | 'fa-2' | 'fa-3' | 'fa-360-degrees' | 'fa-4' | 'fa-5' | 'fa-6' | 'fa-7' | 'fa-8' | 'fa-9' | 'fa-a' | 'fa-abacus' | 'fa-accent-grave' | 'fa-acorn' | 'fa-address-book' | 'fa-address-card' | 'fa-air-conditioner' | 'fa-airplay' | 'fa-alarm-clock' | 'fa-alarm-exclamation' | 'fa-alarm-plus' | 'fa-alarm-snooze' | 'fa-album-circle-plus' | 'fa-album-circle-user' | 'fa-album-collection-circle-plus' | 'fa-album-collection-circle-user' | 'fa-album-collection' | 'fa-album' | 'fa-alicorn' | 'fa-alien-8bit' | 'fa-alien' | 'fa-align-center' | 'fa-align-justify' | 'fa-align-left' | 'fa-align-right' | 'fa-align-slash' | 'fa-alt' | 'fa-amp-guitar' | 'fa-ampersand' | 'fa-anchor-circle-check' | 'fa-anchor-circle-exclamation' | 'fa-anchor-circle-xmark' | 'fa-anchor-lock' | 'fa-anchor' | 'fa-angel' | 'fa-angle-90' | 'fa-angle-down' | 'fa-angle-left' | 'fa-angle-right' | 'fa-angle-up' | 'fa-angle' | 'fa-angles-down' | 'fa-angles-left' | 'fa-angles-right' | 'fa-angles-up-down' | 'fa-angles-up' | 'fa-ankh' | 'fa-ant' | 'fa-apartment' | 'fa-aperture' | 'fa-apostrophe' | 'fa-apple-core' | 'fa-apple-whole' | 'fa-archway' | 'fa-arrow-down-1-9' | 'fa-arrow-down-9-1' | 'fa-arrow-down-a-z' | 'fa-arrow-down-arrow-up' | 'fa-arrow-down-big-small' | 'fa-arrow-down-from-arc' | 'fa-arrow-down-from-bracket' | 'fa-arrow-down-from-dotted-line' | 'fa-arrow-down-from-line' | 'fa-arrow-down-left-and-arrow-up-right-to-center' | 'fa-arrow-down-left' | 'fa-arrow-down-long' | 'fa-arrow-down-right' | 'fa-arrow-down-short-wide' | 'fa-arrow-down-small-big' | 'fa-arrow-down-square-triangle' | 'fa-arrow-down-to-arc' | 'fa-arrow-down-to-bracket' | 'fa-arrow-down-to-dotted-line' | 'fa-arrow-down-to-line' | 'fa-arrow-down-to-square' | 'fa-arrow-down-triangle-square' | 'fa-arrow-down-up-across-line' | 'fa-arrow-down-up-lock' | 'fa-arrow-down-wide-short' | 'fa-arrow-down-z-a' | 'fa-arrow-down' | 'fa-arrow-left-from-arc' | 'fa-arrow-left-from-bracket' | 'fa-arrow-left-from-line' | 'fa-arrow-left-long-to-line' | 'fa-arrow-left-long' | 'fa-arrow-left-to-arc' | 'fa-arrow-left-to-bracket' | 'fa-arrow-left-to-line' | 'fa-arrow-left' | 'fa-arrow-pointer' | 'fa-arrow-progress' | 'fa-arrow-right-arrow-left' | 'fa-arrow-right-from-arc' | 'fa-arrow-right-from-bracket' | 'fa-arrow-right-from-line' | 'fa-arrow-right-long-to-line' | 'fa-arrow-right-long' | 'fa-arrow-right-to-arc' | 'fa-arrow-right-to-bracket' | 'fa-arrow-right-to-city' | 'fa-arrow-right-to-line' | 'fa-arrow-right' | 'fa-arrow-rotate-left' | 'fa-arrow-rotate-right' | 'fa-arrow-trend-down' | 'fa-arrow-trend-up' | 'fa-arrow-turn-down-left' | 'fa-arrow-turn-down-right' | 'fa-arrow-turn-down' | 'fa-arrow-turn-left-down' | 'fa-arrow-turn-left-up' | 'fa-arrow-turn-left' | 'fa-arrow-turn-right' | 'fa-arrow-turn-up' | 'fa-arrow-up-1-9' | 'fa-arrow-up-9-1' | 'fa-arrow-up-a-z' | 'fa-arrow-up-arrow-down' | 'fa-arrow-up-big-small' | 'fa-arrow-up-from-arc' | 'fa-arrow-up-from-bracket' | 'fa-arrow-up-from-dotted-line' | 'fa-arrow-up-from-ground-water' | 'fa-arrow-up-from-line' | 'fa-arrow-up-from-square' | 'fa-arrow-up-from-water-pump' | 'fa-arrow-up-left-from-circle' | 'fa-arrow-up-left' | 'fa-arrow-up-long' | 'fa-arrow-up-right-and-arrow-down-left-from-center' | 'fa-arrow-up-right-dots' | 'fa-arrow-up-right-from-square' | 'fa-arrow-up-right' | 'fa-arrow-up-short-wide' | 'fa-arrow-up-small-big' | 'fa-arrow-up-square-triangle' | 'fa-arrow-up-to-arc' | 'fa-arrow-up-to-bracket' | 'fa-arrow-up-to-dotted-line' | 'fa-arrow-up-to-line' | 'fa-arrow-up-triangle-square' | 'fa-arrow-up-wide-short' | 'fa-arrow-up-z-a' | 'fa-arrow-up' | 'fa-arrows-cross' | 'fa-arrows-down-to-line' | 'fa-arrows-down-to-people' | 'fa-arrows-from-dotted-line' | 'fa-arrows-from-line' | 'fa-arrows-left-right-to-line' | 'fa-arrows-left-right' | 'fa-arrows-maximize' | 'fa-arrows-minimize' | 'fa-arrows-repeat-1' | 'fa-arrows-repeat' | 'fa-arrows-retweet' | 'fa-arrows-rotate-reverse' | 'fa-arrows-rotate' | 'fa-arrows-spin' | 'fa-arrows-split-up-and-left' | 'fa-arrows-to-circle' | 'fa-arrows-to-dot' | 'fa-arrows-to-dotted-line' | 'fa-arrows-to-eye' | 'fa-arrows-to-line' | 'fa-arrows-turn-right' | 'fa-arrows-turn-to-dots' | 'fa-arrows-up-down-left-right' | 'fa-arrows-up-down' | 'fa-arrows-up-to-line' | 'fa-asterisk' | 'fa-at' | 'fa-atom-simple' | 'fa-atom' | 'fa-audio-description-slash' | 'fa-audio-description' | 'fa-austral-sign' | 'fa-avocado' | 'fa-award-simple' | 'fa-award' | 'fa-axe-battle' | 'fa-axe' | 'fa-b' | 'fa-baby-carriage' | 'fa-baby' | 'fa-backpack' | 'fa-backward-fast' | 'fa-backward-step' | 'fa-backward' | 'fa-bacon' | 'fa-bacteria' | 'fa-bacterium' | 'fa-badge-check' | 'fa-badge-dollar' | 'fa-badge-percent' | 'fa-badge-sheriff' | 'fa-badge' | 'fa-badger-honey' | 'fa-badminton' | 'fa-bag-seedling' | 'fa-bag-shopping-minus' | 'fa-bag-shopping-plus' | 'fa-bag-shopping' | 'fa-bagel' | 'fa-bags-shopping' | 'fa-baguette' | 'fa-bahai' | 'fa-baht-sign' | 'fa-ball-pile' | 'fa-balloon' | 'fa-balloons' | 'fa-ballot-check' | 'fa-ballot' | 'fa-ban-bug' | 'fa-ban-parking' | 'fa-ban-smoking' | 'fa-ban' | 'fa-banana' | 'fa-bandage' | 'fa-bangladeshi-taka-sign' | 'fa-banjo' | 'fa-barcode-read' | 'fa-barcode-scan' | 'fa-barcode' | 'fa-bars-filter' | 'fa-bars-progress' | 'fa-bars-sort' | 'fa-bars-staggered' | 'fa-bars' | 'fa-baseball-bat-ball' | 'fa-baseball' | 'fa-basket-shopping-minus' | 'fa-basket-shopping-plus' | 'fa-basket-shopping-simple' | 'fa-basket-shopping' | 'fa-basketball-hoop' | 'fa-basketball' | 'fa-bat' | 'fa-bath' | 'fa-battery-bolt' | 'fa-battery-empty' | 'fa-battery-exclamation' | 'fa-battery-full' | 'fa-battery-half' | 'fa-battery-low' | 'fa-battery-quarter' | 'fa-battery-slash' | 'fa-battery-three-quarters' | 'fa-bed-bunk' | 'fa-bed-empty' | 'fa-bed-front' | 'fa-bed-pulse' | 'fa-bed' | 'fa-bee' | 'fa-beer-mug-empty' | 'fa-beer-mug' | 'fa-bell-concierge' | 'fa-bell-exclamation' | 'fa-bell-on' | 'fa-bell-plus' | 'fa-bell-ring' | 'fa-bell-school-slash' | 'fa-bell-school' | 'fa-bell-slash' | 'fa-bell' | 'fa-bells' | 'fa-bench-tree' | 'fa-bezier-curve' | 'fa-bicycle' | 'fa-billboard' | 'fa-bin-bottles-recycle' | 'fa-bin-bottles' | 'fa-bin-recycle' | 'fa-binary-circle-check' | 'fa-binary-lock' | 'fa-binary-slash' | 'fa-binary' | 'fa-binoculars' | 'fa-biohazard' | 'fa-bird' | 'fa-bitcoin-sign' | 'fa-blanket-fire' | 'fa-blanket' | 'fa-blender-phone' | 'fa-blender' | 'fa-blinds-open' | 'fa-blinds-raised' | 'fa-blinds' | 'fa-block-brick-fire' | 'fa-block-brick' | 'fa-block-question' | 'fa-block-quote' | 'fa-block' | 'fa-blog' | 'fa-blueberries' | 'fa-bluetooth' | 'fa-bold' | 'fa-bolt-auto' | 'fa-bolt-lightning' | 'fa-bolt-slash' | 'fa-bolt' | 'fa-bomb' | 'fa-bone-break' | 'fa-bone' | 'fa-bong' | 'fa-book-arrow-right' | 'fa-book-arrow-up' | 'fa-book-atlas' | 'fa-book-bible' | 'fa-book-blank' | 'fa-book-bookmark' | 'fa-book-circle-arrow-right' | 'fa-book-circle-arrow-up' | 'fa-book-copy' | 'fa-book-font' | 'fa-book-heart' | 'fa-book-journal-whills' | 'fa-book-medical' | 'fa-book-open-cover' | 'fa-book-open-reader' | 'fa-book-open' | 'fa-book-quran' | 'fa-book-section' | 'fa-book-skull' | 'fa-book-sparkles' | 'fa-book-tanakh' | 'fa-book-user' | 'fa-book' | 'fa-bookmark-slash' | 'fa-bookmark' | 'fa-books-medical' | 'fa-books' | 'fa-boombox' | 'fa-boot-heeled' | 'fa-boot' | 'fa-booth-curtain' | 'fa-border-all' | 'fa-border-bottom-right' | 'fa-border-bottom' | 'fa-border-center-h' | 'fa-border-center-v' | 'fa-border-inner' | 'fa-border-left' | 'fa-border-none' | 'fa-border-outer' | 'fa-border-right' | 'fa-border-top-left' | 'fa-border-top' | 'fa-bore-hole' | 'fa-bottle-baby' | 'fa-bottle-droplet' | 'fa-bottle-water' | 'fa-bow-arrow' | 'fa-bowl-chopsticks-noodles' | 'fa-bowl-chopsticks' | 'fa-bowl-food' | 'fa-bowl-hot' | 'fa-bowl-rice' | 'fa-bowl-scoop' | 'fa-bowl-scoops' | 'fa-bowl-soft-serve' | 'fa-bowl-spoon' | 'fa-bowling-ball-pin' | 'fa-bowling-ball' | 'fa-bowling-pins' | 'fa-box-archive' | 'fa-box-ballot' | 'fa-box-check' | 'fa-box-circle-check' | 'fa-box-dollar' | 'fa-box-heart' | 'fa-box-open-full' | 'fa-box-open' | 'fa-box-taped' | 'fa-box-tissue' | 'fa-box' | 'fa-boxes-packing' | 'fa-boxes-stacked' | 'fa-boxing-glove' | 'fa-bracket-curly-right' | 'fa-bracket-curly' | 'fa-bracket-round-right' | 'fa-bracket-round' | 'fa-bracket-square-right' | 'fa-bracket-square' | 'fa-brackets-curly' | 'fa-brackets-round' | 'fa-brackets-square' | 'fa-braille' | 'fa-brain-arrow-curved-right' | 'fa-brain-circuit' | 'fa-brain' | 'fa-brake-warning' | 'fa-brazilian-real-sign' | 'fa-bread-loaf' | 'fa-bread-slice-butter' | 'fa-bread-slice' | 'fa-bridge-circle-check' | 'fa-bridge-circle-exclamation' | 'fa-bridge-circle-xmark' | 'fa-bridge-lock' | 'fa-bridge-suspension' | 'fa-bridge-water' | 'fa-bridge' | 'fa-briefcase-arrow-right' | 'fa-briefcase-blank' | 'fa-briefcase-medical' | 'fa-briefcase' | 'fa-brightness-low' | 'fa-brightness' | 'fa-bring-forward' | 'fa-bring-front' | 'fa-broccoli' | 'fa-broom-ball' | 'fa-broom-wide' | 'fa-broom' | 'fa-browser' | 'fa-browsers' | 'fa-brush' | 'fa-bucket' | 'fa-bug-slash' | 'fa-bug' | 'fa-bugs' | 'fa-building-circle-arrow-right' | 'fa-building-circle-check' | 'fa-building-circle-exclamation' | 'fa-building-circle-xmark' | 'fa-building-columns' | 'fa-building-flag' | 'fa-building-lock' | 'fa-building-magnifying-glass' | 'fa-building-memo' | 'fa-building-ngo' | 'fa-building-shield' | 'fa-building-un' | 'fa-building-user' | 'fa-building-wheat' | 'fa-building' | 'fa-buildings' | 'fa-bulldozer' | 'fa-bullhorn' | 'fa-bullseye-arrow' | 'fa-bullseye-pointer' | 'fa-bullseye' | 'fa-buoy-mooring' | 'fa-buoy' | 'fa-burger-cheese' | 'fa-burger-fries' | 'fa-burger-glass' | 'fa-burger-lettuce' | 'fa-burger-soda' | 'fa-burger' | 'fa-burrito' | 'fa-burst' | 'fa-bus-school' | 'fa-bus-simple' | 'fa-bus' | 'fa-business-time' | 'fa-butter' | 'fa-c' | 'fa-cabin' | 'fa-cabinet-filing' | 'fa-cable-car' | 'fa-cactus' | 'fa-caduceus' | 'fa-cake-candles' | 'fa-cake-slice' | 'fa-calculator-simple' | 'fa-calculator' | 'fa-calendar-arrow-down' | 'fa-calendar-arrow-up' | 'fa-calendar-check' | 'fa-calendar-circle-exclamation' | 'fa-calendar-circle-minus' | 'fa-calendar-circle-plus' | 'fa-calendar-circle-user' | 'fa-calendar-clock' | 'fa-calendar-day' | 'fa-calendar-days' | 'fa-calendar-exclamation' | 'fa-calendar-heart' | 'fa-calendar-image' | 'fa-calendar-lines-pen' | 'fa-calendar-lines' | 'fa-calendar-minus' | 'fa-calendar-pen' | 'fa-calendar-plus' | 'fa-calendar-range' | 'fa-calendar-star' | 'fa-calendar-users' | 'fa-calendar-week' | 'fa-calendar-xmark' | 'fa-calendar' | 'fa-calendars' | 'fa-camcorder' | 'fa-camera-cctv' | 'fa-camera-movie' | 'fa-camera-polaroid' | 'fa-camera-retro' | 'fa-camera-rotate' | 'fa-camera-security' | 'fa-camera-slash' | 'fa-camera-viewfinder' | 'fa-camera-web-slash' | 'fa-camera-web' | 'fa-camera' | 'fa-campfire' | 'fa-campground' | 'fa-can-food' | 'fa-candle-holder' | 'fa-candy-bar' | 'fa-candy-cane' | 'fa-candy-corn' | 'fa-candy' | 'fa-cannabis' | 'fa-cannon' | 'fa-capsules' | 'fa-car-battery' | 'fa-car-bolt' | 'fa-car-building' | 'fa-car-bump' | 'fa-car-burst' | 'fa-car-bus' | 'fa-car-circle-bolt' | 'fa-car-garage' | 'fa-car-mirrors' | 'fa-car-on' | 'fa-car-rear' | 'fa-car-side-bolt' | 'fa-car-side' | 'fa-car-tilt' | 'fa-car-tunnel' | 'fa-car-wash' | 'fa-car-wrench' | 'fa-car' | 'fa-caravan-simple' | 'fa-caravan' | 'fa-card-club' | 'fa-card-diamond' | 'fa-card-heart' | 'fa-card-spade' | 'fa-cards-blank' | 'fa-cards' | 'fa-caret-down' | 'fa-caret-left' | 'fa-caret-right' | 'fa-caret-up' | 'fa-carrot' | 'fa-cars' | 'fa-cart-arrow-down' | 'fa-cart-arrow-up' | 'fa-cart-circle-arrow-down' | 'fa-cart-circle-arrow-up' | 'fa-cart-circle-check' | 'fa-cart-circle-exclamation' | 'fa-cart-circle-plus' | 'fa-cart-circle-xmark' | 'fa-cart-flatbed-boxes' | 'fa-cart-flatbed-empty' | 'fa-cart-flatbed-suitcase' | 'fa-cart-flatbed' | 'fa-cart-minus' | 'fa-cart-plus' | 'fa-cart-shopping-fast' | 'fa-cart-shopping' | 'fa-cart-xmark' | 'fa-cash-register' | 'fa-cassette-betamax' | 'fa-cassette-tape' | 'fa-cassette-vhs' | 'fa-castle' | 'fa-cat-space' | 'fa-cat' | 'fa-cauldron' | 'fa-cedi-sign' | 'fa-cent-sign' | 'fa-certificate' | 'fa-chair-office' | 'fa-chair' | 'fa-chalkboard-user' | 'fa-chalkboard' | 'fa-champagne-glass' | 'fa-champagne-glasses' | 'fa-charging-station' | 'fa-chart-area' | 'fa-chart-bar' | 'fa-chart-bullet' | 'fa-chart-candlestick' | 'fa-chart-column' | 'fa-chart-gantt' | 'fa-chart-kanban' | 'fa-chart-line-down' | 'fa-chart-line-up-down' | 'fa-chart-line-up' | 'fa-chart-line' | 'fa-chart-mixed-up-circle-currency' | 'fa-chart-mixed-up-circle-dollar' | 'fa-chart-mixed' | 'fa-chart-network' | 'fa-chart-pie-simple-circle-currency' | 'fa-chart-pie-simple-circle-dollar' | 'fa-chart-pie-simple' | 'fa-chart-pie' | 'fa-chart-pyramid' | 'fa-chart-radar' | 'fa-chart-scatter-3d' | 'fa-chart-scatter-bubble' | 'fa-chart-scatter' | 'fa-chart-simple-horizontal' | 'fa-chart-simple' | 'fa-chart-tree-map' | 'fa-chart-user' | 'fa-chart-waterfall' | 'fa-check-double' | 'fa-check-to-slot' | 'fa-check' | 'fa-cheese-swiss' | 'fa-cheese' | 'fa-cherries' | 'fa-chess-bishop-piece' | 'fa-chess-bishop' | 'fa-chess-board' | 'fa-chess-clock-flip' | 'fa-chess-clock' | 'fa-chess-king-piece' | 'fa-chess-king' | 'fa-chess-knight-piece' | 'fa-chess-knight' | 'fa-chess-pawn-piece' | 'fa-chess-pawn' | 'fa-chess-queen-piece' | 'fa-chess-queen' | 'fa-chess-rook-piece' | 'fa-chess-rook' | 'fa-chess' | 'fa-chestnut' | 'fa-chevron-down' | 'fa-chevron-left' | 'fa-chevron-right' | 'fa-chevron-up' | 'fa-chevrons-down' | 'fa-chevrons-left' | 'fa-chevrons-right' | 'fa-chevrons-up' | 'fa-chf-sign' | 'fa-child-combatant' | 'fa-child-dress' | 'fa-child-reaching' | 'fa-child' | 'fa-children' | 'fa-chimney' | 'fa-chopsticks' | 'fa-church' | 'fa-circle-0' | 'fa-circle-1' | 'fa-circle-2' | 'fa-circle-3' | 'fa-circle-4' | 'fa-circle-5' | 'fa-circle-6' | 'fa-circle-7' | 'fa-circle-8' | 'fa-circle-9' | 'fa-circle-a' | 'fa-circle-ampersand' | 'fa-circle-arrow-down-left' | 'fa-circle-arrow-down-right' | 'fa-circle-arrow-down' | 'fa-circle-arrow-left' | 'fa-circle-arrow-right' | 'fa-circle-arrow-up-left' | 'fa-circle-arrow-up-right' | 'fa-circle-arrow-up' | 'fa-circle-b' | 'fa-circle-bolt' | 'fa-circle-book-open' | 'fa-circle-bookmark' | 'fa-circle-c' | 'fa-circle-calendar' | 'fa-circle-camera' | 'fa-circle-caret-down' | 'fa-circle-caret-left' | 'fa-circle-caret-right' | 'fa-circle-caret-up' | 'fa-circle-check' | 'fa-circle-chevron-down' | 'fa-circle-chevron-left' | 'fa-circle-chevron-right' | 'fa-circle-chevron-up' | 'fa-circle-d' | 'fa-circle-dashed' | 'fa-circle-divide' | 'fa-circle-dollar-to-slot' | 'fa-circle-dollar' | 'fa-circle-dot' | 'fa-circle-down-left' | 'fa-circle-down-right' | 'fa-circle-down' | 'fa-circle-e' | 'fa-circle-ellipsis-vertical' | 'fa-circle-ellipsis' | 'fa-circle-envelope' | 'fa-circle-euro' | 'fa-circle-exclamation-check' | 'fa-circle-exclamation' | 'fa-circle-f' | 'fa-circle-g' | 'fa-circle-gf' | 'fa-circle-h' | 'fa-circle-half-stroke' | 'fa-circle-half' | 'fa-circle-heart' | 'fa-circle-i' | 'fa-circle-info' | 'fa-circle-j' | 'fa-circle-k' | 'fa-circle-l' | 'fa-circle-left' | 'fa-circle-location-arrow' | 'fa-circle-m' | 'fa-circle-microphone-lines' | 'fa-circle-microphone' | 'fa-circle-minus' | 'fa-circle-n' | 'fa-circle-nodes' | 'fa-circle-notch' | 'fa-circle-o' | 'fa-circle-p' | 'fa-circle-parking' | 'fa-circle-pause' | 'fa-circle-phone-flip' | 'fa-circle-phone-hangup' | 'fa-circle-phone' | 'fa-circle-play' | 'fa-circle-plus' | 'fa-circle-q' | 'fa-circle-quarter-stroke' | 'fa-circle-quarter' | 'fa-circle-quarters' | 'fa-circle-question' | 'fa-circle-r' | 'fa-circle-radiation' | 'fa-circle-right' | 'fa-circle-s' | 'fa-circle-small' | 'fa-circle-sort-down' | 'fa-circle-sort-up' | 'fa-circle-sort' | 'fa-circle-star' | 'fa-circle-sterling' | 'fa-circle-stop' | 'fa-circle-t' | 'fa-circle-three-quarters-stroke' | 'fa-circle-three-quarters' | 'fa-circle-trash' | 'fa-circle-u' | 'fa-circle-up-left' | 'fa-circle-up-right' | 'fa-circle-up' | 'fa-circle-user' | 'fa-circle-v' | 'fa-circle-video' | 'fa-circle-w' | 'fa-circle-waveform-lines' | 'fa-circle-wifi-circle-wifi' | 'fa-circle-wifi' | 'fa-circle-x' | 'fa-circle-xmark' | 'fa-circle-y' | 'fa-circle-yen' | 'fa-circle-z' | 'fa-circle' | 'fa-circles-overlap' | 'fa-citrus-slice' | 'fa-citrus' | 'fa-city' | 'fa-clapperboard-play' | 'fa-clapperboard' | 'fa-clarinet' | 'fa-claw-marks' | 'fa-clipboard-check' | 'fa-clipboard-list-check' | 'fa-clipboard-list' | 'fa-clipboard-medical' | 'fa-clipboard-prescription' | 'fa-clipboard-question' | 'fa-clipboard-user' | 'fa-clipboard' | 'fa-clock-desk' | 'fa-clock-eight-thirty' | 'fa-clock-eight' | 'fa-clock-eleven-thirty' | 'fa-clock-eleven' | 'fa-clock-five-thirty' | 'fa-clock-five' | 'fa-clock-four-thirty' | 'fa-clock-nine-thirty' | 'fa-clock-nine' | 'fa-clock-one-thirty' | 'fa-clock-one' | 'fa-clock-rotate-left' | 'fa-clock-seven-thirty' | 'fa-clock-seven' | 'fa-clock-six-thirty' | 'fa-clock-six' | 'fa-clock-ten-thirty' | 'fa-clock-ten' | 'fa-clock-three-thirty' | 'fa-clock-three' | 'fa-clock-twelve-thirty' | 'fa-clock-twelve' | 'fa-clock-two-thirty' | 'fa-clock-two' | 'fa-clock' | 'fa-clone' | 'fa-closed-captioning-slash' | 'fa-closed-captioning' | 'fa-clothes-hanger' | 'fa-cloud-arrow-down' | 'fa-cloud-arrow-up' | 'fa-cloud-binary' | 'fa-cloud-bolt-moon' | 'fa-cloud-bolt-sun' | 'fa-cloud-bolt' | 'fa-cloud-check' | 'fa-cloud-drizzle' | 'fa-cloud-exclamation' | 'fa-cloud-fog' | 'fa-cloud-hail-mixed' | 'fa-cloud-hail' | 'fa-cloud-meatball' | 'fa-cloud-minus' | 'fa-cloud-moon-rain' | 'fa-cloud-moon' | 'fa-cloud-music' | 'fa-cloud-plus' | 'fa-cloud-question' | 'fa-cloud-rain' | 'fa-cloud-rainbow' | 'fa-cloud-showers-heavy' | 'fa-cloud-showers-water' | 'fa-cloud-showers' | 'fa-cloud-slash' | 'fa-cloud-sleet' | 'fa-cloud-snow' | 'fa-cloud-sun-rain' | 'fa-cloud-sun' | 'fa-cloud-word' | 'fa-cloud-xmark' | 'fa-cloud' | 'fa-clouds-moon' | 'fa-clouds-sun' | 'fa-clouds' | 'fa-clover' | 'fa-club' | 'fa-coconut' | 'fa-code-branch' | 'fa-code-commit' | 'fa-code-compare' | 'fa-code-fork' | 'fa-code-merge' | 'fa-code-pull-request-closed' | 'fa-code-pull-request-draft' | 'fa-code-pull-request' | 'fa-code-simple' | 'fa-code' | 'fa-coffee-bean' | 'fa-coffee-beans' | 'fa-coffee-pot' | 'fa-coffin-cross' | 'fa-coffin' | 'fa-coin-blank' | 'fa-coin-front' | 'fa-coin-vertical' | 'fa-coin' | 'fa-coins' | 'fa-colon-sign' | 'fa-colon' | 'fa-columns-3' | 'fa-comet' | 'fa-comma' | 'fa-command' | 'fa-comment-arrow-down' | 'fa-comment-arrow-up-right' | 'fa-comment-arrow-up' | 'fa-comment-captions' | 'fa-comment-check' | 'fa-comment-code' | 'fa-comment-dollar' | 'fa-comment-dots' | 'fa-comment-exclamation' | 'fa-comment-heart' | 'fa-comment-image' | 'fa-comment-lines' | 'fa-comment-medical' | 'fa-comment-middle-top' | 'fa-comment-middle' | 'fa-comment-minus' | 'fa-comment-music' | 'fa-comment-pen' | 'fa-comment-plus' | 'fa-comment-question' | 'fa-comment-quote' | 'fa-comment-slash' | 'fa-comment-smile' | 'fa-comment-sms' | 'fa-comment-text' | 'fa-comment-xmark' | 'fa-comment' | 'fa-comments-dollar' | 'fa-comments-question-check' | 'fa-comments-question' | 'fa-comments' | 'fa-compact-disc' | 'fa-compass-drafting' | 'fa-compass-slash' | 'fa-compass' | 'fa-compress-wide' | 'fa-compress' | 'fa-computer-classic' | 'fa-computer-mouse-scrollwheel' | 'fa-computer-mouse' | 'fa-computer-speaker' | 'fa-computer' | 'fa-container-storage' | 'fa-conveyor-belt-arm' | 'fa-conveyor-belt-boxes' | 'fa-conveyor-belt-empty' | 'fa-conveyor-belt' | 'fa-cookie-bite' | 'fa-cookie' | 'fa-copy' | 'fa-copyright' | 'fa-corn' | 'fa-corner' | 'fa-couch' | 'fa-court-sport' | 'fa-cow' | 'fa-cowbell-circle-plus' | 'fa-cowbell' | 'fa-crab' | 'fa-crate-apple' | 'fa-crate-empty' | 'fa-credit-card-blank' | 'fa-credit-card-front' | 'fa-credit-card' | 'fa-cricket-bat-ball' | 'fa-croissant' | 'fa-crop-simple' | 'fa-crop' | 'fa-cross' | 'fa-crosshairs-simple' | 'fa-crosshairs' | 'fa-crow' | 'fa-crown' | 'fa-crutch' | 'fa-crutches' | 'fa-cruzeiro-sign' | 'fa-crystal-ball' | 'fa-cube' | 'fa-cubes-stacked' | 'fa-cubes' | 'fa-cucumber' | 'fa-cup-straw-swoosh' | 'fa-cup-straw' | 'fa-cup-togo' | 'fa-cupcake' | 'fa-curling-stone' | 'fa-custard' | 'fa-d' | 'fa-dagger' | 'fa-dash' | 'fa-database' | 'fa-deer-rudolph' | 'fa-deer' | 'fa-delete-left' | 'fa-delete-right' | 'fa-democrat' | 'fa-desktop-arrow-down' | 'fa-desktop' | 'fa-dharmachakra' | 'fa-diagram-cells' | 'fa-diagram-lean-canvas' | 'fa-diagram-nested' | 'fa-diagram-next' | 'fa-diagram-predecessor' | 'fa-diagram-previous' | 'fa-diagram-project' | 'fa-diagram-sankey' | 'fa-diagram-subtask' | 'fa-diagram-successor' | 'fa-diagram-venn' | 'fa-dial-high' | 'fa-dial-low' | 'fa-dial-max' | 'fa-dial-med-low' | 'fa-dial-med' | 'fa-dial-min' | 'fa-dial-off' | 'fa-dial' | 'fa-diamond-exclamation' | 'fa-diamond-half-stroke' | 'fa-diamond-half' | 'fa-diamond-turn-right' | 'fa-diamond' | 'fa-dice-d10' | 'fa-dice-d12' | 'fa-dice-d20' | 'fa-dice-d4' | 'fa-dice-d6' | 'fa-dice-d8' | 'fa-dice-five' | 'fa-dice-four' | 'fa-dice-one' | 'fa-dice-six' | 'fa-dice-three' | 'fa-dice-two' | 'fa-dice' | 'fa-dinosaur' | 'fa-diploma' | 'fa-disc-drive' | 'fa-disease' | 'fa-display-arrow-down' | 'fa-display-chart-up-circle-currency' | 'fa-display-chart-up-circle-dollar' | 'fa-display-chart-up' | 'fa-display-code' | 'fa-display-medical' | 'fa-display-slash' | 'fa-display' | 'fa-distribute-spacing-horizontal' | 'fa-distribute-spacing-vertical' | 'fa-ditto' | 'fa-divide' | 'fa-dna' | 'fa-do-not-enter' | 'fa-dog-leashed' | 'fa-dog' | 'fa-dollar-sign' | 'fa-dolly-empty' | 'fa-dolly' | 'fa-dolphin' | 'fa-dong-sign' | 'fa-donut' | 'fa-door-closed' | 'fa-door-open' | 'fa-dove' | 'fa-down-from-bracket' | 'fa-down-from-dotted-line' | 'fa-down-from-line' | 'fa-down-left-and-up-right-to-center' | 'fa-down-left' | 'fa-down-long' | 'fa-down-right' | 'fa-down-to-bracket' | 'fa-down-to-dotted-line' | 'fa-down-to-line' | 'fa-down' | 'fa-download' | 'fa-dragon' | 'fa-draw-circle' | 'fa-draw-polygon' | 'fa-draw-square' | 'fa-dreidel' | 'fa-drone-front' | 'fa-drone' | 'fa-droplet-degree' | 'fa-droplet-percent' | 'fa-droplet-slash' | 'fa-droplet' | 'fa-drum-steelpan' | 'fa-drum' | 'fa-drumstick-bite' | 'fa-drumstick' | 'fa-dryer-heat' | 'fa-dryer' | 'fa-duck' | 'fa-dumbbell' | 'fa-dumpster-fire' | 'fa-dumpster' | 'fa-dungeon' | 'fa-e' | 'fa-ear-deaf' | 'fa-ear-listen' | 'fa-ear-muffs' | 'fa-ear' | 'fa-earth-africa' | 'fa-earth-americas' | 'fa-earth-asia' | 'fa-earth-europe' | 'fa-earth-oceania' | 'fa-eclipse' | 'fa-egg-fried' | 'fa-egg' | 'fa-eggplant' | 'fa-eject' | 'fa-elephant' | 'fa-elevator' | 'fa-ellipsis-stroke-vertical' | 'fa-ellipsis-stroke' | 'fa-ellipsis-vertical' | 'fa-ellipsis' | 'fa-empty-set' | 'fa-engine-warning' | 'fa-engine' | 'fa-envelope-circle-check' | 'fa-envelope-dot' | 'fa-envelope-open-dollar' | 'fa-envelope-open-text' | 'fa-envelope-open' | 'fa-envelope' | 'fa-envelopes-bulk' | 'fa-envelopes' | 'fa-equals' | 'fa-eraser' | 'fa-escalator' | 'fa-ethernet' | 'fa-euro-sign' | 'fa-excavator' | 'fa-exclamation' | 'fa-expand-wide' | 'fa-expand' | 'fa-explosion' | 'fa-eye-dropper-full' | 'fa-eye-dropper-half' | 'fa-eye-dropper' | 'fa-eye-evil' | 'fa-eye-low-vision' | 'fa-eye-slash' | 'fa-eye' | 'fa-eyes' | 'fa-f' | 'fa-face-angry-horns' | 'fa-face-angry' | 'fa-face-anguished' | 'fa-face-anxious-sweat' | 'fa-face-astonished' | 'fa-face-awesome' | 'fa-face-beam-hand-over-mouth' | 'fa-face-clouds' | 'fa-face-confounded' | 'fa-face-confused' | 'fa-face-cowboy-hat' | 'fa-face-diagonal-mouth' | 'fa-face-disappointed' | 'fa-face-disguise' | 'fa-face-dizzy' | 'fa-face-dotted' | 'fa-face-downcast-sweat' | 'fa-face-drooling' | 'fa-face-exhaling' | 'fa-face-explode' | 'fa-face-expressionless' | 'fa-face-eyes-xmarks' | 'fa-face-fearful' | 'fa-face-flushed' | 'fa-face-frown-open' | 'fa-face-frown-slight' | 'fa-face-frown' | 'fa-face-glasses' | 'fa-face-grimace' | 'fa-face-grin-beam-sweat' | 'fa-face-grin-beam' | 'fa-face-grin-hearts' | 'fa-face-grin-squint-tears' | 'fa-face-grin-squint' | 'fa-face-grin-stars' | 'fa-face-grin-tears' | 'fa-face-grin-tongue-squint' | 'fa-face-grin-tongue-wink' | 'fa-face-grin-tongue' | 'fa-face-grin-wide' | 'fa-face-grin-wink' | 'fa-face-grin' | 'fa-face-hand-over-mouth' | 'fa-face-hand-peeking' | 'fa-face-hand-yawn' | 'fa-face-head-bandage' | 'fa-face-holding-back-tears' | 'fa-face-hushed' | 'fa-face-icicles' | 'fa-face-kiss-beam' | 'fa-face-kiss-closed-eyes' | 'fa-face-kiss-wink-heart' | 'fa-face-kiss' | 'fa-face-laugh-beam' | 'fa-face-laugh-squint' | 'fa-face-laugh-wink' | 'fa-face-laugh' | 'fa-face-lying' | 'fa-face-mask' | 'fa-face-meh-blank' | 'fa-face-meh' | 'fa-face-melting' | 'fa-face-monocle' | 'fa-face-nauseated' | 'fa-face-nose-steam' | 'fa-face-party' | 'fa-face-pensive' | 'fa-face-persevering' | 'fa-face-pleading' | 'fa-face-pouting' | 'fa-face-raised-eyebrow' | 'fa-face-relieved' | 'fa-face-rolling-eyes' | 'fa-face-sad-cry' | 'fa-face-sad-sweat' | 'fa-face-sad-tear' | 'fa-face-saluting' | 'fa-face-scream' | 'fa-face-shush' | 'fa-face-sleeping' | 'fa-face-sleepy' | 'fa-face-smile-beam' | 'fa-face-smile-halo' | 'fa-face-smile-hearts' | 'fa-face-smile-horns' | 'fa-face-smile-plus' | 'fa-face-smile-relaxed' | 'fa-face-smile-tear' | 'fa-face-smile-tongue' | 'fa-face-smile-upside-down' | 'fa-face-smile-wink' | 'fa-face-smile' | 'fa-face-smiling-hands' | 'fa-face-smirking' | 'fa-face-spiral-eyes' | 'fa-face-sunglasses' | 'fa-face-surprise' | 'fa-face-swear' | 'fa-face-thermometer' | 'fa-face-thinking' | 'fa-face-tired' | 'fa-face-tissue' | 'fa-face-tongue-money' | 'fa-face-tongue-sweat' | 'fa-face-unamused' | 'fa-face-viewfinder' | 'fa-face-vomit' | 'fa-face-weary' | 'fa-face-woozy' | 'fa-face-worried' | 'fa-face-zany' | 'fa-face-zipper' | 'fa-falafel' | 'fa-family-dress' | 'fa-family-pants' | 'fa-family' | 'fa-fan-table' | 'fa-fan' | 'fa-farm' | 'fa-faucet-drip' | 'fa-faucet' | 'fa-fax' | 'fa-feather-pointed' | 'fa-feather' | 'fa-fence' | 'fa-ferris-wheel' | 'fa-ferry' | 'fa-field-hockey-stick-ball' | 'fa-file-arrow-down' | 'fa-file-arrow-up' | 'fa-file-audio' | 'fa-file-binary' | 'fa-file-cad' | 'fa-file-certificate' | 'fa-file-chart-column' | 'fa-file-chart-pie' | 'fa-file-check' | 'fa-file-circle-check' | 'fa-file-circle-exclamation' | 'fa-file-circle-info' | 'fa-file-circle-minus' | 'fa-file-circle-plus' | 'fa-file-circle-question' | 'fa-file-circle-xmark' | 'fa-file-code' | 'fa-file-contract' | 'fa-file-csv' | 'fa-file-dashed-line' | 'fa-file-doc' | 'fa-file-eps' | 'fa-file-excel' | 'fa-file-exclamation' | 'fa-file-export' | 'fa-file-gif' | 'fa-file-heart' | 'fa-file-image' | 'fa-file-import' | 'fa-file-jpg' | 'fa-file-lines' | 'fa-file-lock' | 'fa-file-magnifying-glass' | 'fa-file-medical' | 'fa-file-minus' | 'fa-file-mov' | 'fa-file-mp3' | 'fa-file-mp4' | 'fa-file-music' | 'fa-file-pdf' | 'fa-file-pen' | 'fa-file-plus-minus' | 'fa-file-plus' | 'fa-file-png' | 'fa-file-powerpoint' | 'fa-file-ppt' | 'fa-file-prescription' | 'fa-file-shield' | 'fa-file-signature' | 'fa-file-slash' | 'fa-file-spreadsheet' | 'fa-file-svg' | 'fa-file-user' | 'fa-file-vector' | 'fa-file-video' | 'fa-file-waveform' | 'fa-file-word' | 'fa-file-xls' | 'fa-file-xmark' | 'fa-file-xml' | 'fa-file-zip' | 'fa-file-zipper' | 'fa-file' | 'fa-files-medical' | 'fa-files' | 'fa-fill-drip' | 'fa-fill' | 'fa-film-canister' | 'fa-film-simple' | 'fa-film-slash' | 'fa-film' | 'fa-films' | 'fa-filter-circle-dollar' | 'fa-filter-circle-xmark' | 'fa-filter-list' | 'fa-filter-slash' | 'fa-filter' | 'fa-filters' | 'fa-fingerprint' | 'fa-fire-burner' | 'fa-fire-extinguisher' | 'fa-fire-flame-curved' | 'fa-fire-flame-simple' | 'fa-fire-flame' | 'fa-fire-hydrant' | 'fa-fire-smoke' | 'fa-fire' | 'fa-fireplace' | 'fa-fish-bones' | 'fa-fish-cooked' | 'fa-fish-fins' | 'fa-fish' | 'fa-fishing-rod' | 'fa-flag-checkered' | 'fa-flag-pennant' | 'fa-flag-swallowtail' | 'fa-flag-usa' | 'fa-flag' | 'fa-flashlight' | 'fa-flask-gear' | 'fa-flask-round-poison' | 'fa-flask-round-potion' | 'fa-flask-vial' | 'fa-flask' | 'fa-flatbread-stuffed' | 'fa-flatbread' | 'fa-floppy-disk-circle-arrow-right' | 'fa-floppy-disk-circle-xmark' | 'fa-floppy-disk-pen' | 'fa-floppy-disk' | 'fa-floppy-disks' | 'fa-florin-sign' | 'fa-flower-daffodil' | 'fa-flower-tulip' | 'fa-flower' | 'fa-flute' | 'fa-flux-capacitor' | 'fa-flying-disc' | 'fa-folder-arrow-down' | 'fa-folder-arrow-up' | 'fa-folder-bookmark' | 'fa-folder-check' | 'fa-folder-closed' | 'fa-folder-gear' | 'fa-folder-grid' | 'fa-folder-heart' | 'fa-folder-image' | 'fa-folder-magnifying-glass' | 'fa-folder-medical' | 'fa-folder-minus' | 'fa-folder-music' | 'fa-folder-open' | 'fa-folder-plus' | 'fa-folder-tree' | 'fa-folder-user' | 'fa-folder-xmark' | 'fa-folder' | 'fa-folders' | 'fa-fondue-pot' | 'fa-font-awesome' | 'fa-font-case' | 'fa-font' | 'fa-football-helmet' | 'fa-football' | 'fa-fork-knife' | 'fa-fork' | 'fa-forklift' | 'fa-fort' | 'fa-forward-fast' | 'fa-forward-step' | 'fa-forward' | 'fa-frame' | 'fa-franc-sign' | 'fa-french-fries' | 'fa-frog' | 'fa-function' | 'fa-futbol' | 'fa-g' | 'fa-galaxy' | 'fa-gallery-thumbnails' | 'fa-game-board-simple' | 'fa-game-board' | 'fa-game-console-handheld-crank' | 'fa-game-console-handheld' | 'fa-gamepad-modern' | 'fa-gamepad' | 'fa-garage-car' | 'fa-garage-open' | 'fa-garage' | 'fa-garlic' | 'fa-gas-pump-slash' | 'fa-gas-pump' | 'fa-gauge-circle-bolt' | 'fa-gauge-circle-minus' | 'fa-gauge-circle-plus' | 'fa-gauge-high' | 'fa-gauge-low' | 'fa-gauge-max' | 'fa-gauge-min' | 'fa-gauge-simple-high' | 'fa-gauge-simple-low' | 'fa-gauge-simple-max' | 'fa-gauge-simple-min' | 'fa-gauge-simple' | 'fa-gauge' | 'fa-gavel' | 'fa-gear-code' | 'fa-gear-complex-code' | 'fa-gear-complex' | 'fa-gear' | 'fa-gears' | 'fa-gem' | 'fa-genderless' | 'fa-ghost' | 'fa-gif' | 'fa-gift-card' | 'fa-gift' | 'fa-gifts' | 'fa-gingerbread-man' | 'fa-glass-citrus' | 'fa-glass-empty' | 'fa-glass-half' | 'fa-glass-water-droplet' | 'fa-glass-water' | 'fa-glass' | 'fa-glasses-round' | 'fa-glasses' | 'fa-globe-pointer' | 'fa-globe-snow' | 'fa-globe-stand' | 'fa-globe' | 'fa-goal-net' | 'fa-golf-ball-tee' | 'fa-golf-club' | 'fa-golf-flag-hole' | 'fa-gopuram' | 'fa-graduation-cap' | 'fa-gramophone' | 'fa-grapes' | 'fa-grate-droplet' | 'fa-grate' | 'fa-greater-than-equal' | 'fa-greater-than' | 'fa-grid-2-plus' | 'fa-grid-2' | 'fa-grid-4' | 'fa-grid-5' | 'fa-grid-dividers' | 'fa-grid-horizontal' | 'fa-grid-round-2-plus' | 'fa-grid-round-2' | 'fa-grid-round-4' | 'fa-grid-round-5' | 'fa-grid-round' | 'fa-grid' | 'fa-grill-fire' | 'fa-grill-hot' | 'fa-grill' | 'fa-grip-dots-vertical' | 'fa-grip-dots' | 'fa-grip-lines-vertical' | 'fa-grip-lines' | 'fa-grip-vertical' | 'fa-grip' | 'fa-group-arrows-rotate' | 'fa-guarani-sign' | 'fa-guitar-electric' | 'fa-guitar' | 'fa-guitars' | 'fa-gun-slash' | 'fa-gun-squirt' | 'fa-gun' | 'fa-h' | 'fa-h1' | 'fa-h2' | 'fa-h3' | 'fa-h4' | 'fa-h5' | 'fa-h6' | 'fa-hammer-brush' | 'fa-hammer-crash' | 'fa-hammer-war' | 'fa-hammer' | 'fa-hamsa' | 'fa-hand-back-fist' | 'fa-hand-back-point-down' | 'fa-hand-back-point-left' | 'fa-hand-back-point-ribbon' | 'fa-hand-back-point-right' | 'fa-hand-back-point-up' | 'fa-hand-dots' | 'fa-hand-fingers-crossed' | 'fa-hand-fist' | 'fa-hand-heart' | 'fa-hand-holding-box' | 'fa-hand-holding-circle-dollar' | 'fa-hand-holding-dollar' | 'fa-hand-holding-droplet' | 'fa-hand-holding-hand' | 'fa-hand-holding-heart' | 'fa-hand-holding-magic' | 'fa-hand-holding-medical' | 'fa-hand-holding-seedling' | 'fa-hand-holding-skull' | 'fa-hand-holding' | 'fa-hand-horns' | 'fa-hand-lizard' | 'fa-hand-love' | 'fa-hand-middle-finger' | 'fa-hand-peace' | 'fa-hand-point-down' | 'fa-hand-point-left' | 'fa-hand-point-ribbon' | 'fa-hand-point-right' | 'fa-hand-point-up' | 'fa-hand-pointer' | 'fa-hand-scissors' | 'fa-hand-sparkles' | 'fa-hand-spock' | 'fa-hand-wave' | 'fa-hand' | 'fa-handcuffs' | 'fa-hands-asl-interpreting' | 'fa-hands-bound' | 'fa-hands-bubbles' | 'fa-hands-clapping' | 'fa-hands-holding-child' | 'fa-hands-holding-circle' | 'fa-hands-holding-diamond' | 'fa-hands-holding-dollar' | 'fa-hands-holding-heart' | 'fa-hands-holding' | 'fa-hands-praying' | 'fa-hands' | 'fa-handshake-angle' | 'fa-handshake-simple-slash' | 'fa-handshake-simple' | 'fa-handshake-slash' | 'fa-handshake' | 'fa-hanukiah' | 'fa-hard-drive' | 'fa-hashtag-lock' | 'fa-hashtag' | 'fa-hat-beach' | 'fa-hat-chef' | 'fa-hat-cowboy-side' | 'fa-hat-cowboy' | 'fa-hat-santa' | 'fa-hat-winter' | 'fa-hat-witch' | 'fa-hat-wizard' | 'fa-head-side-brain' | 'fa-head-side-cough-slash' | 'fa-head-side-cough' | 'fa-head-side-gear' | 'fa-head-side-goggles' | 'fa-head-side-headphones' | 'fa-head-side-heart' | 'fa-head-side-mask' | 'fa-head-side-medical' | 'fa-head-side-virus' | 'fa-head-side' | 'fa-heading' | 'fa-headphones-simple' | 'fa-headphones' | 'fa-headset' | 'fa-heart-circle-bolt' | 'fa-heart-circle-check' | 'fa-heart-circle-exclamation' | 'fa-heart-circle-minus' | 'fa-heart-circle-plus' | 'fa-heart-circle-xmark' | 'fa-heart-crack' | 'fa-heart-half-stroke' | 'fa-heart-half' | 'fa-heart-pulse' | 'fa-heart' | 'fa-heat' | 'fa-helicopter-symbol' | 'fa-helicopter' | 'fa-helmet-battle' | 'fa-helmet-safety' | 'fa-helmet-un' | 'fa-hexagon-check' | 'fa-hexagon-divide' | 'fa-hexagon-exclamation' | 'fa-hexagon-image' | 'fa-hexagon-minus' | 'fa-hexagon-plus' | 'fa-hexagon-vertical-nft-slanted' | 'fa-hexagon-vertical-nft' | 'fa-hexagon-xmark' | 'fa-hexagon' | 'fa-high-definition' | 'fa-highlighter-line' | 'fa-highlighter' | 'fa-hill-avalanche' | 'fa-hill-rockslide' | 'fa-hippo' | 'fa-hockey-mask' | 'fa-hockey-puck' | 'fa-hockey-stick-puck' | 'fa-hockey-sticks' | 'fa-holly-berry' | 'fa-honey-pot' | 'fa-hood-cloak' | 'fa-horizontal-rule' | 'fa-horse-head' | 'fa-horse-saddle' | 'fa-horse' | 'fa-hose-reel' | 'fa-hose' | 'fa-hospital-user' | 'fa-hospital' | 'fa-hospitals' | 'fa-hot-tub-person' | 'fa-hotdog' | 'fa-hotel' | 'fa-hourglass-clock' | 'fa-hourglass-end' | 'fa-hourglass-half' | 'fa-hourglass-start' | 'fa-hourglass' | 'fa-house-blank' | 'fa-house-building' | 'fa-house-chimney-blank' | 'fa-house-chimney-crack' | 'fa-house-chimney-heart' | 'fa-house-chimney-medical' | 'fa-house-chimney-user' | 'fa-house-chimney-window' | 'fa-house-chimney' | 'fa-house-circle-check' | 'fa-house-circle-exclamation' | 'fa-house-circle-xmark' | 'fa-house-crack' | 'fa-house-day' | 'fa-house-fire' | 'fa-house-flag' | 'fa-house-flood-water-circle-arrow-right' | 'fa-house-flood-water' | 'fa-house-heart' | 'fa-house-laptop' | 'fa-house-lock' | 'fa-house-medical-circle-check' | 'fa-house-medical-circle-exclamation' | 'fa-house-medical-circle-xmark' | 'fa-house-medical-flag' | 'fa-house-medical' | 'fa-house-night' | 'fa-house-person-leave' | 'fa-house-person-return' | 'fa-house-signal' | 'fa-house-tree' | 'fa-house-tsunami' | 'fa-house-turret' | 'fa-house-user' | 'fa-house-water' | 'fa-house-window' | 'fa-house' | 'fa-hryvnia-sign' | 'fa-hundred-points' | 'fa-hurricane' | 'fa-hyphen' | 'fa-i-cursor' | 'fa-i' | 'fa-ice-cream' | 'fa-ice-skate' | 'fa-icicles' | 'fa-icons' | 'fa-id-badge' | 'fa-id-card-clip' | 'fa-id-card' | 'fa-igloo' | 'fa-image-landscape' | 'fa-image-polaroid-user' | 'fa-image-polaroid' | 'fa-image-portrait' | 'fa-image-slash' | 'fa-image-user' | 'fa-image' | 'fa-images-user' | 'fa-images' | 'fa-inbox-full' | 'fa-inbox-in' | 'fa-inbox-out' | 'fa-inbox' | 'fa-inboxes' | 'fa-indent' | 'fa-indian-rupee-sign' | 'fa-industry-windows' | 'fa-industry' | 'fa-infinity' | 'fa-info' | 'fa-inhaler' | 'fa-input-numeric' | 'fa-input-pipe' | 'fa-input-text' | 'fa-integral' | 'fa-interrobang' | 'fa-intersection' | 'fa-island-tropical' | 'fa-italic' | 'fa-j' | 'fa-jack-o-lantern' | 'fa-jar-wheat' | 'fa-jar' | 'fa-jedi' | 'fa-jet-fighter-up' | 'fa-jet-fighter' | 'fa-joint' | 'fa-joystick' | 'fa-jug-bottle' | 'fa-jug-detergent' | 'fa-jug' | 'fa-k' | 'fa-kaaba' | 'fa-kazoo' | 'fa-kerning' | 'fa-key-skeleton-left-right' | 'fa-key-skeleton' | 'fa-key' | 'fa-keyboard-brightness-low' | 'fa-keyboard-brightness' | 'fa-keyboard-down' | 'fa-keyboard-left' | 'fa-keyboard' | 'fa-keynote' | 'fa-khanda' | 'fa-kidneys' | 'fa-kip-sign' | 'fa-kit-medical' | 'fa-kitchen-set' | 'fa-kite' | 'fa-kiwi-bird' | 'fa-kiwi-fruit' | 'fa-knife-kitchen' | 'fa-knife' | 'fa-l' | 'fa-lacrosse-stick-ball' | 'fa-lacrosse-stick' | 'fa-lambda' | 'fa-lamp-desk' | 'fa-lamp-floor' | 'fa-lamp-street' | 'fa-lamp' | 'fa-land-mine-on' | 'fa-landmark-dome' | 'fa-landmark-flag' | 'fa-landmark-magnifying-glass' | 'fa-landmark' | 'fa-language' | 'fa-laptop-arrow-down' | 'fa-laptop-binary' | 'fa-laptop-code' | 'fa-laptop-file' | 'fa-laptop-medical' | 'fa-laptop-mobile' | 'fa-laptop-slash' | 'fa-laptop' | 'fa-lari-sign' | 'fa-lasso-sparkles' | 'fa-lasso' | 'fa-layer-group' | 'fa-layer-minus' | 'fa-layer-plus' | 'fa-leaf-heart' | 'fa-leaf-maple' | 'fa-leaf-oak' | 'fa-leaf' | 'fa-leafy-green' | 'fa-left-from-bracket' | 'fa-left-from-line' | 'fa-left-long-to-line' | 'fa-left-long' | 'fa-left-right' | 'fa-left-to-bracket' | 'fa-left-to-line' | 'fa-left' | 'fa-lemon' | 'fa-less-than-equal' | 'fa-less-than' | 'fa-life-ring' | 'fa-light-ceiling' | 'fa-light-emergency-on' | 'fa-light-emergency' | 'fa-light-switch-off' | 'fa-light-switch-on' | 'fa-light-switch' | 'fa-lightbulb-cfl-on' | 'fa-lightbulb-cfl' | 'fa-lightbulb-dollar' | 'fa-lightbulb-exclamation-on' | 'fa-lightbulb-exclamation' | 'fa-lightbulb-gear' | 'fa-lightbulb-on' | 'fa-lightbulb-slash' | 'fa-lightbulb' | 'fa-lighthouse' | 'fa-lights-holiday' | 'fa-line-columns' | 'fa-line-height' | 'fa-lines-leaning' | 'fa-link-horizontal-slash' | 'fa-link-horizontal' | 'fa-link-simple-slash' | 'fa-link-simple' | 'fa-link-slash' | 'fa-link' | 'fa-lips' | 'fa-lira-sign' | 'fa-list-check' | 'fa-list-dropdown' | 'fa-list-music' | 'fa-list-ol' | 'fa-list-radio' | 'fa-list-timeline' | 'fa-list-tree' | 'fa-list-ul' | 'fa-list' | 'fa-litecoin-sign' | 'fa-loader' | 'fa-lobster' | 'fa-location-arrow-up' | 'fa-location-arrow' | 'fa-location-check' | 'fa-location-crosshairs-slash' | 'fa-location-crosshairs' | 'fa-location-dot-slash' | 'fa-location-dot' | 'fa-location-exclamation' | 'fa-location-minus' | 'fa-location-pen' | 'fa-location-pin-lock' | 'fa-location-pin-slash' | 'fa-location-pin' | 'fa-location-plus' | 'fa-location-question' | 'fa-location-smile' | 'fa-location-xmark' | 'fa-lock-a' | 'fa-lock-hashtag' | 'fa-lock-keyhole-open' | 'fa-lock-keyhole' | 'fa-lock-open' | 'fa-lock' | 'fa-locust' | 'fa-lollipop' | 'fa-loveseat' | 'fa-luchador-mask' | 'fa-lungs-virus' | 'fa-lungs' | 'fa-m' | 'fa-mace' | 'fa-magnet' | 'fa-magnifying-glass-arrow-right' | 'fa-magnifying-glass-arrows-rotate' | 'fa-magnifying-glass-chart' | 'fa-magnifying-glass-dollar' | 'fa-magnifying-glass-location' | 'fa-magnifying-glass-minus' | 'fa-magnifying-glass-music' | 'fa-magnifying-glass-play' | 'fa-magnifying-glass-plus' | 'fa-magnifying-glass-waveform' | 'fa-magnifying-glass' | 'fa-mailbox-flag-up' | 'fa-mailbox' | 'fa-manat-sign' | 'fa-mandolin' | 'fa-mango' | 'fa-manhole' | 'fa-map-location-dot' | 'fa-map-location' | 'fa-map-pin' | 'fa-map' | 'fa-marker' | 'fa-mars-and-venus-burst' | 'fa-mars-and-venus' | 'fa-mars-double' | 'fa-mars-stroke-right' | 'fa-mars-stroke-up' | 'fa-mars-stroke' | 'fa-mars' | 'fa-martini-glass-citrus' | 'fa-martini-glass-empty' | 'fa-martini-glass' | 'fa-mask-face' | 'fa-mask-snorkel' | 'fa-mask-ventilator' | 'fa-mask' | 'fa-masks-theater' | 'fa-mattress-pillow' | 'fa-maximize' | 'fa-meat' | 'fa-medal' | 'fa-megaphone' | 'fa-melon-slice' | 'fa-melon' | 'fa-memo-circle-check' | 'fa-memo-circle-info' | 'fa-memo-pad' | 'fa-memo' | 'fa-memory' | 'fa-menorah' | 'fa-mercury' | 'fa-merge' | 'fa-message-arrow-down' | 'fa-message-arrow-up-right' | 'fa-message-arrow-up' | 'fa-message-bot' | 'fa-message-captions' | 'fa-message-check' | 'fa-message-code' | 'fa-message-dollar' | 'fa-message-dots' | 'fa-message-exclamation' | 'fa-message-heart' | 'fa-message-image' | 'fa-message-lines' | 'fa-message-medical' | 'fa-message-middle-top' | 'fa-message-middle' | 'fa-message-minus' | 'fa-message-music' | 'fa-message-pen' | 'fa-message-plus' | 'fa-message-question' | 'fa-message-quote' | 'fa-message-slash' | 'fa-message-smile' | 'fa-message-sms' | 'fa-message-text' | 'fa-message-xmark' | 'fa-message' | 'fa-messages-dollar' | 'fa-messages-question' | 'fa-messages' | 'fa-meteor' | 'fa-meter-bolt' | 'fa-meter-droplet' | 'fa-meter-fire' | 'fa-meter' | 'fa-microchip-ai' | 'fa-microchip' | 'fa-microphone-lines-slash' | 'fa-microphone-lines' | 'fa-microphone-slash' | 'fa-microphone-stand' | 'fa-microphone' | 'fa-microscope' | 'fa-microwave' | 'fa-mill-sign' | 'fa-minimize' | 'fa-minus' | 'fa-mistletoe' | 'fa-mitten' | 'fa-mobile-button' | 'fa-mobile-notch' | 'fa-mobile-retro' | 'fa-mobile-screen-button' | 'fa-mobile-screen' | 'fa-mobile-signal-out' | 'fa-mobile-signal' | 'fa-mobile' | 'fa-money-bill-1-wave' | 'fa-money-bill-1' | 'fa-money-bill-simple-wave' | 'fa-money-bill-simple' | 'fa-money-bill-transfer' | 'fa-money-bill-trend-up' | 'fa-money-bill-wave' | 'fa-money-bill-wheat' | 'fa-money-bill' | 'fa-money-bills-simple' | 'fa-money-bills' | 'fa-money-check-dollar-pen' | 'fa-money-check-dollar' | 'fa-money-check-pen' | 'fa-money-check' | 'fa-money-from-bracket' | 'fa-money-simple-from-bracket' | 'fa-monitor-waveform' | 'fa-monkey' | 'fa-monument' | 'fa-moon-cloud' | 'fa-moon-over-sun' | 'fa-moon-stars' | 'fa-moon' | 'fa-moped' | 'fa-mortar-pestle' | 'fa-mosque' | 'fa-mosquito-net' | 'fa-mosquito' | 'fa-motorcycle' | 'fa-mound' | 'fa-mountain-city' | 'fa-mountain-sun' | 'fa-mountain' | 'fa-mountains' | 'fa-mouse-field' | 'fa-mp3-player' | 'fa-mug-hot' | 'fa-mug-marshmallows' | 'fa-mug-tea-saucer' | 'fa-mug-tea' | 'fa-mug' | 'fa-mushroom' | 'fa-music-magnifying-glass' | 'fa-music-note-slash' | 'fa-music-note' | 'fa-music-slash' | 'fa-music' | 'fa-mustache' | 'fa-n' | 'fa-naira-sign' | 'fa-narwhal' | 'fa-nesting-dolls' | 'fa-network-wired' | 'fa-neuter' | 'fa-newspaper' | 'fa-nfc-lock' | 'fa-nfc-magnifying-glass' | 'fa-nfc-pen' | 'fa-nfc-signal' | 'fa-nfc-slash' | 'fa-nfc-symbol' | 'fa-nfc-trash' | 'fa-nfc' | 'fa-nose' | 'fa-not-equal' | 'fa-notdef' | 'fa-note-medical' | 'fa-note-sticky' | 'fa-note' | 'fa-notebook' | 'fa-notes-medical' | 'fa-notes' | 'fa-o' | 'fa-object-exclude' | 'fa-object-group' | 'fa-object-intersect' | 'fa-object-subtract' | 'fa-object-ungroup' | 'fa-object-union' | 'fa-objects-align-bottom' | 'fa-objects-align-center-horizontal' | 'fa-objects-align-center-vertical' | 'fa-objects-align-left' | 'fa-objects-align-right' | 'fa-objects-align-top' | 'fa-objects-column' | 'fa-octagon-check' | 'fa-octagon-divide' | 'fa-octagon-exclamation' | 'fa-octagon-minus' | 'fa-octagon-plus' | 'fa-octagon-xmark' | 'fa-octagon' | 'fa-oil-can-drip' | 'fa-oil-can' | 'fa-oil-temperature' | 'fa-oil-well' | 'fa-olive-branch' | 'fa-olive' | 'fa-om' | 'fa-omega' | 'fa-onion' | 'fa-option' | 'fa-ornament' | 'fa-otter' | 'fa-outdent' | 'fa-outlet' | 'fa-oven' | 'fa-overline' | 'fa-p' | 'fa-page-caret-down' | 'fa-page-caret-up' | 'fa-page' | 'fa-pager' | 'fa-paint-roller' | 'fa-paintbrush-fine' | 'fa-paintbrush-pencil' | 'fa-paintbrush' | 'fa-palette' | 'fa-pallet-box' | 'fa-pallet-boxes' | 'fa-pallet' | 'fa-pan-food' | 'fa-pan-frying' | 'fa-pancakes' | 'fa-panel-ews' | 'fa-panel-fire' | 'fa-panorama' | 'fa-paper-plane-top' | 'fa-paper-plane' | 'fa-paperclip-vertical' | 'fa-paperclip' | 'fa-parachute-box' | 'fa-paragraph-left' | 'fa-paragraph' | 'fa-party-bell' | 'fa-party-horn' | 'fa-passport' | 'fa-paste' | 'fa-pause' | 'fa-paw-claws' | 'fa-paw-simple' | 'fa-paw' | 'fa-peace' | 'fa-peach' | 'fa-peanut' | 'fa-peanuts' | 'fa-peapod' | 'fa-pear' | 'fa-pedestal' | 'fa-pegasus' | 'fa-pen-circle' | 'fa-pen-clip-slash' | 'fa-pen-clip' | 'fa-pen-fancy-slash' | 'fa-pen-fancy' | 'fa-pen-field' | 'fa-pen-line' | 'fa-pen-nib-slash' | 'fa-pen-nib' | 'fa-pen-paintbrush' | 'fa-pen-ruler' | 'fa-pen-slash' | 'fa-pen-swirl' | 'fa-pen-to-square' | 'fa-pen' | 'fa-pencil-mechanical' | 'fa-pencil-slash' | 'fa-pencil' | 'fa-people-arrows' | 'fa-people-carry-box' | 'fa-people-dress-simple' | 'fa-people-dress' | 'fa-people-group' | 'fa-people-line' | 'fa-people-pants-simple' | 'fa-people-pants' | 'fa-people-pulling' | 'fa-people-robbery' | 'fa-people-roof' | 'fa-people-simple' | 'fa-people' | 'fa-pepper-hot' | 'fa-pepper' | 'fa-percent' | 'fa-period' | 'fa-person-arrow-down-to-line' | 'fa-person-arrow-up-from-line' | 'fa-person-biking-mountain' | 'fa-person-biking' | 'fa-person-booth' | 'fa-person-breastfeeding' | 'fa-person-burst' | 'fa-person-cane' | 'fa-person-carry-box' | 'fa-person-chalkboard' | 'fa-person-circle-check' | 'fa-person-circle-exclamation' | 'fa-person-circle-minus' | 'fa-person-circle-plus' | 'fa-person-circle-question' | 'fa-person-circle-xmark' | 'fa-person-digging' | 'fa-person-dolly-empty' | 'fa-person-dolly' | 'fa-person-dots-from-line' | 'fa-person-dress-burst' | 'fa-person-dress-fairy' | 'fa-person-dress-simple' | 'fa-person-dress' | 'fa-person-drowning' | 'fa-person-fairy' | 'fa-person-falling-burst' | 'fa-person-falling' | 'fa-person-from-portal' | 'fa-person-half-dress' | 'fa-person-harassing' | 'fa-person-hiking' | 'fa-person-military-pointing' | 'fa-person-military-rifle' | 'fa-person-military-to-person' | 'fa-person-pinball' | 'fa-person-praying' | 'fa-person-pregnant' | 'fa-person-rays' | 'fa-person-rifle' | 'fa-person-running-fast' | 'fa-person-running' | 'fa-person-seat-reclined' | 'fa-person-seat' | 'fa-person-shelter' | 'fa-person-sign' | 'fa-person-simple' | 'fa-person-skating' | 'fa-person-ski-jumping' | 'fa-person-ski-lift' | 'fa-person-skiing-nordic' | 'fa-person-skiing' | 'fa-person-sledding' | 'fa-person-snowboarding' | 'fa-person-snowmobiling' | 'fa-person-swimming' | 'fa-person-through-window' | 'fa-person-to-door' | 'fa-person-to-portal' | 'fa-person-walking-arrow-loop-left' | 'fa-person-walking-arrow-right' | 'fa-person-walking-dashed-line-arrow-right' | 'fa-person-walking-luggage' | 'fa-person-walking-with-cane' | 'fa-person-walking' | 'fa-person' | 'fa-peseta-sign' | 'fa-peso-sign' | 'fa-phone-arrow-down-left' | 'fa-phone-arrow-right' | 'fa-phone-arrow-up-right' | 'fa-phone-flip' | 'fa-phone-hangup' | 'fa-phone-intercom' | 'fa-phone-missed' | 'fa-phone-office' | 'fa-phone-plus' | 'fa-phone-rotary' | 'fa-phone-slash' | 'fa-phone-volume' | 'fa-phone-xmark' | 'fa-phone' | 'fa-photo-film-music' | 'fa-photo-film' | 'fa-pi' | 'fa-piano-keyboard' | 'fa-piano' | 'fa-pickaxe' | 'fa-pickleball' | 'fa-pie' | 'fa-pig' | 'fa-piggy-bank' | 'fa-pills' | 'fa-pinata' | 'fa-pinball' | 'fa-pineapple' | 'fa-pipe-circle-check' | 'fa-pipe-collar' | 'fa-pipe-section' | 'fa-pipe-smoking' | 'fa-pipe-valve' | 'fa-pipe' | 'fa-pizza-slice' | 'fa-pizza' | 'fa-place-of-worship' | 'fa-plane-arrival' | 'fa-plane-circle-check' | 'fa-plane-circle-exclamation' | 'fa-plane-circle-xmark' | 'fa-plane-departure' | 'fa-plane-engines' | 'fa-plane-lock' | 'fa-plane-prop' | 'fa-plane-slash' | 'fa-plane-tail' | 'fa-plane-up-slash' | 'fa-plane-up' | 'fa-plane' | 'fa-planet-moon' | 'fa-planet-ringed' | 'fa-plant-wilt' | 'fa-plate-utensils' | 'fa-plate-wheat' | 'fa-play-pause' | 'fa-play' | 'fa-plug-circle-bolt' | 'fa-plug-circle-check' | 'fa-plug-circle-exclamation' | 'fa-plug-circle-minus' | 'fa-plug-circle-plus' | 'fa-plug-circle-xmark' | 'fa-plug' | 'fa-plus-large' | 'fa-plus-minus' | 'fa-plus' | 'fa-podcast' | 'fa-podium-star' | 'fa-podium' | 'fa-police-box' | 'fa-poll-people' | 'fa-pompebled' | 'fa-poo-storm' | 'fa-poo' | 'fa-pool-8-ball' | 'fa-poop' | 'fa-popcorn' | 'fa-popsicle' | 'fa-pot-food' | 'fa-potato' | 'fa-power-off' | 'fa-prescription-bottle-medical' | 'fa-prescription-bottle-pill' | 'fa-prescription-bottle' | 'fa-prescription' | 'fa-presentation-screen' | 'fa-pretzel' | 'fa-print-magnifying-glass' | 'fa-print-slash' | 'fa-print' | 'fa-projector' | 'fa-pump-medical' | 'fa-pump-soap' | 'fa-pump' | 'fa-pumpkin' | 'fa-puzzle-piece-simple' | 'fa-puzzle-piece' | 'fa-puzzle' | 'fa-q' | 'fa-qrcode' | 'fa-question' | 'fa-quote-left' | 'fa-quote-right' | 'fa-quotes' | 'fa-r' | 'fa-rabbit-running' | 'fa-rabbit' | 'fa-raccoon' | 'fa-racquet' | 'fa-radar' | 'fa-radiation' | 'fa-radio-tuner' | 'fa-radio' | 'fa-rainbow' | 'fa-raindrops' | 'fa-ram' | 'fa-ramp-loading' | 'fa-ranking-star' | 'fa-raygun' | 'fa-receipt' | 'fa-record-vinyl' | 'fa-rectangle-ad' | 'fa-rectangle-barcode' | 'fa-rectangle-code' | 'fa-rectangle-history-circle-plus' | 'fa-rectangle-history-circle-user' | 'fa-rectangle-history' | 'fa-rectangle-list' | 'fa-rectangle-pro' | 'fa-rectangle-terminal' | 'fa-rectangle-vertical-history' | 'fa-rectangle-vertical' | 'fa-rectangle-wide' | 'fa-rectangle-xmark' | 'fa-rectangle' | 'fa-rectangles-mixed' | 'fa-recycle' | 'fa-reel' | 'fa-reflect-both' | 'fa-reflect-horizontal' | 'fa-reflect-vertical' | 'fa-refrigerator' | 'fa-registered' | 'fa-repeat-1' | 'fa-repeat' | 'fa-reply-all' | 'fa-reply-clock' | 'fa-reply' | 'fa-republican' | 'fa-restroom-simple' | 'fa-restroom' | 'fa-retweet' | 'fa-rhombus' | 'fa-ribbon' | 'fa-right-from-bracket' | 'fa-right-from-line' | 'fa-right-left-large' | 'fa-right-left' | 'fa-right-long-to-line' | 'fa-right-long' | 'fa-right-to-bracket' | 'fa-right-to-line' | 'fa-right' | 'fa-ring-diamond' | 'fa-ring' | 'fa-rings-wedding' | 'fa-road-barrier' | 'fa-road-bridge' | 'fa-road-circle-check' | 'fa-road-circle-exclamation' | 'fa-road-circle-xmark' | 'fa-road-lock' | 'fa-road-spikes' | 'fa-road' | 'fa-robot-astromech' | 'fa-robot' | 'fa-rocket-launch' | 'fa-rocket' | 'fa-roller-coaster' | 'fa-rotate-exclamation' | 'fa-rotate-left' | 'fa-rotate-reverse' | 'fa-rotate-right' | 'fa-rotate' | 'fa-route-highway' | 'fa-route-interstate' | 'fa-route' | 'fa-router' | 'fa-rss' | 'fa-ruble-sign' | 'fa-rug' | 'fa-rugby-ball' | 'fa-ruler-combined' | 'fa-ruler-horizontal' | 'fa-ruler-triangle' | 'fa-ruler-vertical' | 'fa-ruler' | 'fa-rupee-sign' | 'fa-rupiah-sign' | 'fa-rv' | 'fa-s' | 'fa-sack-dollar' | 'fa-sack-xmark' | 'fa-sack' | 'fa-sailboat' | 'fa-salad' | 'fa-salt-shaker' | 'fa-sandwich' | 'fa-satellite-dish' | 'fa-satellite' | 'fa-sausage' | 'fa-saxophone-fire' | 'fa-saxophone' | 'fa-scale-balanced' | 'fa-scale-unbalanced-flip' | 'fa-scale-unbalanced' | 'fa-scalpel-line-dashed' | 'fa-scalpel' | 'fa-scanner-gun' | 'fa-scanner-image' | 'fa-scanner-keyboard' | 'fa-scanner-touchscreen' | 'fa-scarecrow' | 'fa-scarf' | 'fa-school-circle-check' | 'fa-school-circle-exclamation' | 'fa-school-circle-xmark' | 'fa-school-flag' | 'fa-school-lock' | 'fa-school' | 'fa-scissors' | 'fa-screen-users' | 'fa-screencast' | 'fa-screwdriver-wrench' | 'fa-screwdriver' | 'fa-scribble' | 'fa-scroll-old' | 'fa-scroll-torah' | 'fa-scroll' | 'fa-scrubber' | 'fa-scythe' | 'fa-sd-card' | 'fa-sd-cards' | 'fa-seal-exclamation' | 'fa-seal-question' | 'fa-seal' | 'fa-seat-airline' | 'fa-section' | 'fa-seedling' | 'fa-semicolon' | 'fa-send-back' | 'fa-send-backward' | 'fa-sensor-cloud' | 'fa-sensor-fire' | 'fa-sensor-on' | 'fa-sensor-triangle-exclamation' | 'fa-sensor' | 'fa-server' | 'fa-shapes' | 'fa-share-all' | 'fa-share-from-square' | 'fa-share-nodes' | 'fa-share' | 'fa-sheep' | 'fa-sheet-plastic' | 'fa-shekel-sign' | 'fa-shelves-empty' | 'fa-shelves' | 'fa-shield-cat' | 'fa-shield-check' | 'fa-shield-cross' | 'fa-shield-dog' | 'fa-shield-exclamation' | 'fa-shield-halved' | 'fa-shield-heart' | 'fa-shield-keyhole' | 'fa-shield-minus' | 'fa-shield-plus' | 'fa-shield-quartered' | 'fa-shield-slash' | 'fa-shield-virus' | 'fa-shield-xmark' | 'fa-shield' | 'fa-ship' | 'fa-shirt-long-sleeve' | 'fa-shirt-running' | 'fa-shirt-tank-top' | 'fa-shirt' | 'fa-shish-kebab' | 'fa-shoe-prints' | 'fa-shop-lock' | 'fa-shop-slash' | 'fa-shop' | 'fa-shovel-snow' | 'fa-shovel' | 'fa-shower-down' | 'fa-shower' | 'fa-shredder' | 'fa-shrimp' | 'fa-shuffle' | 'fa-shutters' | 'fa-shuttle-space' | 'fa-shuttlecock' | 'fa-sickle' | 'fa-sidebar-flip' | 'fa-sidebar' | 'fa-sigma' | 'fa-sign-hanging' | 'fa-sign-post' | 'fa-sign-posts-wrench' | 'fa-sign-posts' | 'fa-signal-bars-fair' | 'fa-signal-bars-good' | 'fa-signal-bars-slash' | 'fa-signal-bars-weak' | 'fa-signal-bars' | 'fa-signal-fair' | 'fa-signal-good' | 'fa-signal-slash' | 'fa-signal-stream-slash' | 'fa-signal-stream' | 'fa-signal-strong' | 'fa-signal-weak' | 'fa-signal' | 'fa-signature-lock' | 'fa-signature-slash' | 'fa-signature' | 'fa-signs-post' | 'fa-sim-card' | 'fa-sim-cards' | 'fa-sink' | 'fa-siren-on' | 'fa-siren' | 'fa-sitemap' | 'fa-skeleton-ribs' | 'fa-skeleton' | 'fa-ski-boot-ski' | 'fa-ski-boot' | 'fa-skull-cow' | 'fa-skull-crossbones' | 'fa-skull' | 'fa-slash-back' | 'fa-slash-forward' | 'fa-slash' | 'fa-sleigh' | 'fa-slider' | 'fa-sliders-simple' | 'fa-sliders-up' | 'fa-sliders' | 'fa-slot-machine' | 'fa-smog' | 'fa-smoke' | 'fa-smoking' | 'fa-snake' | 'fa-snooze' | 'fa-snow-blowing' | 'fa-snowflake-droplets' | 'fa-snowflake' | 'fa-snowflakes' | 'fa-snowman-head' | 'fa-snowman' | 'fa-snowplow' | 'fa-soap' | 'fa-socks' | 'fa-soft-serve' | 'fa-solar-panel' | 'fa-solar-system' | 'fa-sort-down' | 'fa-sort-up' | 'fa-sort' | 'fa-spa' | 'fa-space-station-moon-construction' | 'fa-space-station-moon' | 'fa-spade' | 'fa-spaghetti-monster-flying' | 'fa-sparkle' | 'fa-sparkles' | 'fa-speaker' | 'fa-speakers' | 'fa-spell-check' | 'fa-spider-black-widow' | 'fa-spider-web' | 'fa-spider' | 'fa-spinner-scale' | 'fa-spinner-third' | 'fa-spinner' | 'fa-split' | 'fa-splotch' | 'fa-spoon' | 'fa-sportsball' | 'fa-spray-can-sparkles' | 'fa-spray-can' | 'fa-sprinkler-ceiling' | 'fa-sprinkler' | 'fa-square-0' | 'fa-square-1' | 'fa-square-2' | 'fa-square-3' | 'fa-square-4' | 'fa-square-5' | 'fa-square-6' | 'fa-square-7' | 'fa-square-8' | 'fa-square-9' | 'fa-square-a-lock' | 'fa-square-a' | 'fa-square-ampersand' | 'fa-square-arrow-down-left' | 'fa-square-arrow-down-right' | 'fa-square-arrow-down' | 'fa-square-arrow-left' | 'fa-square-arrow-right' | 'fa-square-arrow-up-left' | 'fa-square-arrow-up-right' | 'fa-square-arrow-up' | 'fa-square-b' | 'fa-square-bolt' | 'fa-square-c' | 'fa-square-caret-down' | 'fa-square-caret-left' | 'fa-square-caret-right' | 'fa-square-caret-up' | 'fa-square-check' | 'fa-square-chevron-down' | 'fa-square-chevron-left' | 'fa-square-chevron-right' | 'fa-square-chevron-up' | 'fa-square-code' | 'fa-square-d' | 'fa-square-dashed-circle-plus' | 'fa-square-dashed' | 'fa-square-divide' | 'fa-square-dollar' | 'fa-square-down-left' | 'fa-square-down-right' | 'fa-square-down' | 'fa-square-e' | 'fa-square-ellipsis-vertical' | 'fa-square-ellipsis' | 'fa-square-envelope' | 'fa-square-exclamation' | 'fa-square-f' | 'fa-square-fragile' | 'fa-square-full' | 'fa-square-g' | 'fa-square-h' | 'fa-square-heart' | 'fa-square-i' | 'fa-square-info' | 'fa-square-j' | 'fa-square-k' | 'fa-square-kanban' | 'fa-square-l' | 'fa-square-left' | 'fa-square-list' | 'fa-square-m' | 'fa-square-minus' | 'fa-square-n' | 'fa-square-nfi' | 'fa-square-o' | 'fa-square-p' | 'fa-square-parking-slash' | 'fa-square-parking' | 'fa-square-pen' | 'fa-square-person-confined' | 'fa-square-phone-flip' | 'fa-square-phone-hangup' | 'fa-square-phone' | 'fa-square-plus' | 'fa-square-poll-horizontal' | 'fa-square-poll-vertical' | 'fa-square-q' | 'fa-square-quarters' | 'fa-square-question' | 'fa-square-quote' | 'fa-square-r' | 'fa-square-right' | 'fa-square-ring' | 'fa-square-root-variable' | 'fa-square-root' | 'fa-square-rss' | 'fa-square-s' | 'fa-square-share-nodes' | 'fa-square-sliders-vertical' | 'fa-square-sliders' | 'fa-square-small' | 'fa-square-star' | 'fa-square-t' | 'fa-square-terminal' | 'fa-square-this-way-up' | 'fa-square-u' | 'fa-square-up-left' | 'fa-square-up-right' | 'fa-square-up' | 'fa-square-user' | 'fa-square-v' | 'fa-square-virus' | 'fa-square-w' | 'fa-square-x' | 'fa-square-xmark' | 'fa-square-y' | 'fa-square-z' | 'fa-square' | 'fa-squid' | 'fa-squirrel' | 'fa-staff-snake' | 'fa-staff' | 'fa-stairs' | 'fa-stamp' | 'fa-standard-definition' | 'fa-stapler' | 'fa-star-and-crescent' | 'fa-star-christmas' | 'fa-star-exclamation' | 'fa-star-half-stroke' | 'fa-star-half' | 'fa-star-of-david' | 'fa-star-of-life' | 'fa-star-sharp-half-stroke' | 'fa-star-sharp-half' | 'fa-star-sharp' | 'fa-star-shooting' | 'fa-star' | 'fa-starfighter-twin-ion-engine-advanced' | 'fa-starfighter-twin-ion-engine' | 'fa-starfighter' | 'fa-stars' | 'fa-starship-freighter' | 'fa-starship' | 'fa-steak' | 'fa-steering-wheel' | 'fa-sterling-sign' | 'fa-stethoscope' | 'fa-stocking' | 'fa-stomach' | 'fa-stop' | 'fa-stopwatch-20' | 'fa-stopwatch' | 'fa-store-lock' | 'fa-store-slash' | 'fa-store' | 'fa-strawberry' | 'fa-street-view' | 'fa-stretcher' | 'fa-strikethrough' | 'fa-stroopwafel' | 'fa-subscript' | 'fa-subtitles-slash' | 'fa-subtitles' | 'fa-suitcase-medical' | 'fa-suitcase-rolling' | 'fa-suitcase' | 'fa-sun-bright' | 'fa-sun-cloud' | 'fa-sun-dust' | 'fa-sun-haze' | 'fa-sun-plant-wilt' | 'fa-sun' | 'fa-sunglasses' | 'fa-sunrise' | 'fa-sunset' | 'fa-superscript' | 'fa-sushi-roll' | 'fa-sushi' | 'fa-swap-arrows' | 'fa-swap' | 'fa-swatchbook' | 'fa-sword-laser-alt' | 'fa-sword-laser' | 'fa-sword' | 'fa-swords-laser' | 'fa-swords' | 'fa-symbols' | 'fa-synagogue' | 'fa-syringe' | 'fa-t-rex' | 'fa-t' | 'fa-table-cells-column-lock' | 'fa-table-cells-large' | 'fa-table-cells-lock' | 'fa-table-cells-row-lock' | 'fa-table-cells' | 'fa-table-columns' | 'fa-table-layout' | 'fa-table-list' | 'fa-table-picnic' | 'fa-table-pivot' | 'fa-table-rows' | 'fa-table-tennis-paddle-ball' | 'fa-table-tree' | 'fa-table' | 'fa-tablet-button' | 'fa-tablet-rugged' | 'fa-tablet-screen-button' | 'fa-tablet-screen' | 'fa-tablet' | 'fa-tablets' | 'fa-tachograph-digital' | 'fa-taco' | 'fa-tag' | 'fa-tags' | 'fa-tally-1' | 'fa-tally-2' | 'fa-tally-3' | 'fa-tally-4' | 'fa-tally' | 'fa-tamale' | 'fa-tank-water' | 'fa-tape' | 'fa-tarp-droplet' | 'fa-tarp' | 'fa-taxi-bus' | 'fa-taxi' | 'fa-teddy-bear' | 'fa-teeth-open' | 'fa-teeth' | 'fa-telescope' | 'fa-temperature-arrow-down' | 'fa-temperature-arrow-up' | 'fa-temperature-empty' | 'fa-temperature-full' | 'fa-temperature-half' | 'fa-temperature-high' | 'fa-temperature-list' | 'fa-temperature-low' | 'fa-temperature-quarter' | 'fa-temperature-snow' | 'fa-temperature-sun' | 'fa-temperature-three-quarters' | 'fa-tenge-sign' | 'fa-tennis-ball' | 'fa-tent-arrow-down-to-line' | 'fa-tent-arrow-left-right' | 'fa-tent-arrow-turn-left' | 'fa-tent-arrows-down' | 'fa-tent-double-peak' | 'fa-tent' | 'fa-tents' | 'fa-terminal' | 'fa-text-height' | 'fa-text-size' | 'fa-text-slash' | 'fa-text-width' | 'fa-text' | 'fa-thermometer' | 'fa-theta' | 'fa-thought-bubble' | 'fa-thumbs-down' | 'fa-thumbs-up' | 'fa-thumbtack' | 'fa-tick' | 'fa-ticket-airline' | 'fa-ticket-perforated' | 'fa-ticket-simple' | 'fa-ticket' | 'fa-tickets-airline' | 'fa-tickets-perforated' | 'fa-tickets-simple' | 'fa-tickets' | 'fa-tilde' | 'fa-timeline-arrow' | 'fa-timeline' | 'fa-timer' | 'fa-tire-flat' | 'fa-tire-pressure-warning' | 'fa-tire-rugged' | 'fa-tire' | 'fa-toggle-large-off' | 'fa-toggle-large-on' | 'fa-toggle-off' | 'fa-toggle-on' | 'fa-toilet-paper-blank-under' | 'fa-toilet-paper-blank' | 'fa-toilet-paper-check' | 'fa-toilet-paper-slash' | 'fa-toilet-paper-under-slash' | 'fa-toilet-paper-under' | 'fa-toilet-paper-xmark' | 'fa-toilet-paper' | 'fa-toilet-portable' | 'fa-toilet' | 'fa-toilets-portable' | 'fa-tomato' | 'fa-tombstone-blank' | 'fa-tombstone' | 'fa-toolbox' | 'fa-tooth' | 'fa-toothbrush' | 'fa-torii-gate' | 'fa-tornado' | 'fa-tower-broadcast' | 'fa-tower-cell' | 'fa-tower-control' | 'fa-tower-observation' | 'fa-tractor' | 'fa-trademark' | 'fa-traffic-cone' | 'fa-traffic-light-go' | 'fa-traffic-light-slow' | 'fa-traffic-light-stop' | 'fa-traffic-light' | 'fa-trailer' | 'fa-train-subway-tunnel' | 'fa-train-subway' | 'fa-train-track' | 'fa-train-tram' | 'fa-train-tunnel' | 'fa-train' | 'fa-transformer-bolt' | 'fa-transgender' | 'fa-transporter-1' | 'fa-transporter-2' | 'fa-transporter-3' | 'fa-transporter-4' | 'fa-transporter-5' | 'fa-transporter-6' | 'fa-transporter-7' | 'fa-transporter-empty' | 'fa-transporter' | 'fa-trash-arrow-up' | 'fa-trash-can-arrow-up' | 'fa-trash-can-check' | 'fa-trash-can-clock' | 'fa-trash-can-list' | 'fa-trash-can-plus' | 'fa-trash-can-slash' | 'fa-trash-can-undo' | 'fa-trash-can-xmark' | 'fa-trash-can' | 'fa-trash-check' | 'fa-trash-clock' | 'fa-trash-list' | 'fa-trash-plus' | 'fa-trash-slash' | 'fa-trash-undo' | 'fa-trash-xmark' | 'fa-trash' | 'fa-treasure-chest' | 'fa-tree-christmas' | 'fa-tree-city' | 'fa-tree-deciduous' | 'fa-tree-decorated' | 'fa-tree-large' | 'fa-tree-palm' | 'fa-tree' | 'fa-trees' | 'fa-triangle-exclamation' | 'fa-triangle-instrument' | 'fa-triangle-person-digging' | 'fa-triangle' | 'fa-tricycle-adult' | 'fa-tricycle' | 'fa-trillium' | 'fa-trophy-star' | 'fa-trophy' | 'fa-trowel-bricks' | 'fa-trowel' | 'fa-truck-arrow-right' | 'fa-truck-bolt' | 'fa-truck-clock' | 'fa-truck-container-empty' | 'fa-truck-container' | 'fa-truck-droplet' | 'fa-truck-fast' | 'fa-truck-field-un' | 'fa-truck-field' | 'fa-truck-fire' | 'fa-truck-flatbed' | 'fa-truck-front' | 'fa-truck-ladder' | 'fa-truck-medical' | 'fa-truck-monster' | 'fa-truck-moving' | 'fa-truck-pickup' | 'fa-truck-plane' | 'fa-truck-plow' | 'fa-truck-ramp-box' | 'fa-truck-ramp-couch' | 'fa-truck-ramp' | 'fa-truck-tow' | 'fa-truck-utensils' | 'fa-truck' | 'fa-trumpet' | 'fa-tty-answer' | 'fa-tty' | 'fa-tugrik-sign' | 'fa-turkey' | 'fa-turkish-lira-sign' | 'fa-turn-down-left' | 'fa-turn-down-right' | 'fa-turn-down' | 'fa-turn-left-down' | 'fa-turn-left-up' | 'fa-turn-left' | 'fa-turn-right' | 'fa-turn-up' | 'fa-turntable' | 'fa-turtle' | 'fa-tv-music' | 'fa-tv-retro' | 'fa-tv' | 'fa-typewriter' | 'fa-u' | 'fa-ufo-beam' | 'fa-ufo' | 'fa-umbrella-beach' | 'fa-umbrella-simple' | 'fa-umbrella' | 'fa-underline' | 'fa-unicorn' | 'fa-uniform-martial-arts' | 'fa-union' | 'fa-universal-access' | 'fa-unlock-keyhole' | 'fa-unlock' | 'fa-up-down-left-right' | 'fa-up-down' | 'fa-up-from-bracket' | 'fa-up-from-dotted-line' | 'fa-up-from-line' | 'fa-up-left' | 'fa-up-long' | 'fa-up-right-and-down-left-from-center' | 'fa-up-right-from-square' | 'fa-up-right' | 'fa-up-to-bracket' | 'fa-up-to-dotted-line' | 'fa-up-to-line' | 'fa-up' | 'fa-upload' | 'fa-usb-drive' | 'fa-user-alien' | 'fa-user-astronaut' | 'fa-user-bounty-hunter' | 'fa-user-check' | 'fa-user-chef' | 'fa-user-clock' | 'fa-user-cowboy' | 'fa-user-crown' | 'fa-user-doctor-hair-long' | 'fa-user-doctor-hair' | 'fa-user-doctor-message' | 'fa-user-doctor' | 'fa-user-gear' | 'fa-user-graduate' | 'fa-user-group-crown' | 'fa-user-group-simple' | 'fa-user-group' | 'fa-user-hair-buns' | 'fa-user-hair-long' | 'fa-user-hair-mullet' | 'fa-user-hair' | 'fa-user-headset' | 'fa-user-helmet-safety' | 'fa-user-injured' | 'fa-user-large-slash' | 'fa-user-large' | 'fa-user-lock' | 'fa-user-magnifying-glass' | 'fa-user-minus' | 'fa-user-music' | 'fa-user-ninja' | 'fa-user-nurse-hair-long' | 'fa-user-nurse-hair' | 'fa-user-nurse' | 'fa-user-pen' | 'fa-user-pilot-tie' | 'fa-user-pilot' | 'fa-user-plus' | 'fa-user-police-tie' | 'fa-user-police' | 'fa-user-robot-xmarks' | 'fa-user-robot' | 'fa-user-secret' | 'fa-user-shakespeare' | 'fa-user-shield' | 'fa-user-slash' | 'fa-user-tag' | 'fa-user-tie-hair-long' | 'fa-user-tie-hair' | 'fa-user-tie' | 'fa-user-unlock' | 'fa-user-visor' | 'fa-user-vneck-hair-long' | 'fa-user-vneck-hair' | 'fa-user-vneck' | 'fa-user-xmark' | 'fa-user' | 'fa-users-between-lines' | 'fa-users-gear' | 'fa-users-line' | 'fa-users-medical' | 'fa-users-rays' | 'fa-users-rectangle' | 'fa-users-slash' | 'fa-users-viewfinder' | 'fa-users' | 'fa-utensils-slash' | 'fa-utensils' | 'fa-utility-pole-double' | 'fa-utility-pole' | 'fa-v' | 'fa-vacuum-robot' | 'fa-vacuum' | 'fa-value-absolute' | 'fa-van-shuttle' | 'fa-vault' | 'fa-vector-circle' | 'fa-vector-polygon' | 'fa-vector-square' | 'fa-vent-damper' | 'fa-venus-double' | 'fa-venus-mars' | 'fa-venus' | 'fa-vest-patches' | 'fa-vest' | 'fa-vial-circle-check' | 'fa-vial-virus' | 'fa-vial' | 'fa-vials' | 'fa-video-arrow-down-left' | 'fa-video-arrow-up-right' | 'fa-video-plus' | 'fa-video-slash' | 'fa-video' | 'fa-vihara' | 'fa-violin' | 'fa-virus-covid-slash' | 'fa-virus-covid' | 'fa-virus-slash' | 'fa-virus' | 'fa-viruses' | 'fa-voicemail' | 'fa-volcano' | 'fa-volleyball' | 'fa-volume-high' | 'fa-volume-low' | 'fa-volume-off' | 'fa-volume-slash' | 'fa-volume-xmark' | 'fa-volume' | 'fa-vr-cardboard' | 'fa-w' | 'fa-waffle' | 'fa-wagon-covered' | 'fa-walker' | 'fa-walkie-talkie' | 'fa-wallet' | 'fa-wand-magic-sparkles' | 'fa-wand-magic' | 'fa-wand-sparkles' | 'fa-wand' | 'fa-warehouse-full' | 'fa-warehouse' | 'fa-washing-machine' | 'fa-watch-apple' | 'fa-watch-calculator' | 'fa-watch-fitness' | 'fa-watch-smart' | 'fa-watch' | 'fa-water-arrow-down' | 'fa-water-arrow-up' | 'fa-water-ladder' | 'fa-water' | 'fa-watermelon-slice' | 'fa-wave-pulse' | 'fa-wave-sine' | 'fa-wave-square' | 'fa-wave-triangle' | 'fa-wave' | 'fa-waveform-lines' | 'fa-waveform' | 'fa-waves-sine' | 'fa-web-awesome' | 'fa-webhook' | 'fa-weight-hanging' | 'fa-weight-scale' | 'fa-whale' | 'fa-wheat-awn-circle-exclamation' | 'fa-wheat-awn-slash' | 'fa-wheat-awn' | 'fa-wheat-slash' | 'fa-wheat' | 'fa-wheelchair-move' | 'fa-wheelchair' | 'fa-whiskey-glass-ice' | 'fa-whiskey-glass' | 'fa-whistle' | 'fa-wifi-exclamation' | 'fa-wifi-fair' | 'fa-wifi-slash' | 'fa-wifi-weak' | 'fa-wifi' | 'fa-wind-turbine' | 'fa-wind-warning' | 'fa-wind' | 'fa-window-flip' | 'fa-window-frame-open' | 'fa-window-frame' | 'fa-window-maximize' | 'fa-window-minimize' | 'fa-window-restore' | 'fa-window' | 'fa-windsock' | 'fa-wine-bottle' | 'fa-wine-glass-crack' | 'fa-wine-glass-empty' | 'fa-wine-glass' | 'fa-won-sign' | 'fa-worm' | 'fa-wreath-laurel' | 'fa-wreath' | 'fa-wrench-simple' | 'fa-wrench' | 'fa-x-ray' | 'fa-x' | 'fa-xmark-large' | 'fa-xmark-to-slot' | 'fa-xmark' | 'fa-xmarks-lines' | 'fa-y' | 'fa-yen-sign' | 'fa-yin-yang' | 'fa-z' | 'facebook-messenger' | 'facebook' | 'family' | 'file-stack' | 'file' | 'filter' | 'flame' | 'gauge-low' | 'gear' | 'github' | 'grid-4' | 'grid-9' | 'hand-pointer' | 'hard-drives' | 'hat-chef' | 'headphones' | 'headset-clock' | 'headset' | 'heart-hand-shake' | 'heart-pulse' | 'heart' | 'hearts' | 'hourglass' | 'house' | 'image-ai' | 'imessage' | 'inbox-in' | 'ink-pen-ai' | 'ink-pen' | 'instagram' | 'kakaotalk' | 'keep-it-simple' | 'key' | 'laptop-circle-check' | 'laptop-circle-dollar' | 'laptop-connection' | 'laptop-dots-horizontal' | 'laptop-gear' | 'laptop-layout' | 'laptop-lightbulb' | 'laptop-pen' | 'laptop-phone-5g' | 'laptop-phone' | 'laptop-rocket' | 'laptop-server' | 'laptop-speech-bubble-stack-left-dots-horizontal' | 'laptop-speech-bubble-stack-left-play' | 'laptop-speech-bubble' | 'laptop-user-circle-dollar' | 'laptop' | 'layer-group' | 'layout' | 'lightbulb-on' | 'line' | 'linkedin' | 'location-pin-exclamation' | 'location-pin' | 'lock-keyhole-waves' | 'lock-keyhole' | 'magnifying-glass' | 'mailbox' | 'make-it-happen' | 'mask-theatre' | 'maximize' | 'megaphone' | 'microphone-ai' | 'microphone-circle-check' | 'microphone-circle-cross' | 'microphone-circle-play' | 'microphone-slash' | 'microphone-waves' | 'microphone' | 'mountains' | 'octagon-exclamation' | 'palette' | 'paper-plane' | 'paper-roll-check' | 'paper-roll-shield' | 'paper-roll-square' | 'pen-ruler' | 'pen' | 'pencil-ai' | 'person-bell' | 'person-female' | 'person-gear' | 'person-male' | 'person-secret' | 'person-tie' | 'person' | 'persons' | 'phone-waves-circle-check' | 'phone-waves' | 'phone' | 'piggy-bank' | 'pills' | 'plant-leaves' | 'plug-socket' | 'rectangle-arrow-split' | 'rectangle-arrow-u-turn-left' | 'rectangle-chart-bar-down' | 'rectangle-chart-bar-up' | 'rectangle-chart-line-down' | 'rectangle-chart-line-up' | 'rectangle-code' | 'rectangle-play' | 'rectangle-stack' | 'robot' | 'rocket' | 'rotate-right-speech-bubble' | 'scale-balanced' | 'server-cloud' | 'server' | 'shield-circle-check' | 'shield-clock' | 'shield-lock' | 'shield-pulse' | 'shield' | 'shirt' | 'shop' | 'silos' | 'smartphone-arrows-right' | 'smartphone-bell' | 'smartphone-circle-call' | 'smartphone-circle-check' | 'smartphone-circle-question' | 'smartphone-digits' | 'smartphone-gear' | 'smartphone-location-pin' | 'smartphone-lock' | 'smartphone-magnifying-glass' | 'smartphone-phone' | 'smartphone-shield' | 'smartphone-speech-bubble-check' | 'smartphone-speech-bubble-dollar' | 'smartphone-speech-bubble-dots-horizontal' | 'smartphone-speech-bubble-lock' | 'smartphone-speech-bubble' | 'smartphone-user-in-magnifying-glass' | 'smartphone-user-in' | 'smartphone-user' | 'smartphone-wifi' | 'smartphone' | 'speech-bubble-circle-check' | 'speech-bubble-circle-exclamation' | 'speech-bubble-circle-plus' | 'speech-bubble-circle-question' | 'speech-bubble-dots-horizontal' | 'speech-bubble-gear-clock' | 'speech-bubble-group-voice-play' | 'speech-bubble-image-clock' | 'speech-bubble-pen' | 'speech-bubble-picture' | 'speech-bubble-play' | 'speech-bubble-plus' | 'speech-bubble-smile' | 'speech-bubble-stack-left-dots-horizontal' | 'speech-bubble-stack-left-picture' | 'speech-bubble-stack-left-play' | 'speech-bubble-stack-left-text-line' | 'speech-bubble-stack-left-text-voice' | 'speech-bubble-stack-right-dots-horizontal' | 'speech-bubble-text-lines-toggle' | 'speech-bubble-text-lines' | 'speech-bubble-user' | 'speech-bubble-voice' | 'speech-bubble' | 'speech-bubbles-stack-left' | 'speech-bubbles-stack-right-image' | 'speech-bubbles-stack-right-play' | 'square-hashtag' | 'square-list-gear' | 'square-list-pen' | 'square-shapes' | 'square-sliders' | 'star' | 'tag' | 'telegram' | 'text-ai' | 'text-lines' | 'thought-bubble' | 'thumb-down' | 'thumb-up' | 'tower-cell' | 'trash-bin' | 'triangle-exclamation' | 'trophy' | 'twitter' | 'viber' | 'waveform' | 'wechat' | 'whatsapp' | 'wifi' | 'win-together' | 'window' | 'wrench' | 'x' | 'xing' | 'youtube';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/icon/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-
|
|
2
|
+
const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none}.zero-to-d{font-family:var(--sinch-comp-icon-font-family-zero-to-d)}.e-to-o{font-family:var(--sinch-comp-icon-font-family-e-to-o)}.p-to-z{font-family:var(--sinch-comp-icon-font-family-p-to-z)}</style><span id="icon" role="img"></span>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-icon', class extends NectaryElement {
|
|
@@ -19,6 +19,7 @@ defineCustomElement('sinch-icon', class extends NectaryElement {
|
|
|
19
19
|
{
|
|
20
20
|
this.#$icon.textContent = newVal;
|
|
21
21
|
updateAttribute(this.#$icon, 'aria-label', newVal);
|
|
22
|
+
this._matchNameToFont();
|
|
22
23
|
break;
|
|
23
24
|
}
|
|
24
25
|
}
|
|
@@ -29,4 +30,15 @@ defineCustomElement('sinch-icon', class extends NectaryElement {
|
|
|
29
30
|
get name() {
|
|
30
31
|
return getAttribute(this, 'name', '');
|
|
31
32
|
}
|
|
33
|
+
_matchNameToFont() {
|
|
34
|
+
if (/^(fa-|(?!fa-))[0-9a-d]/.test(this.name)) {
|
|
35
|
+
return updateAttribute(this.#$icon, 'class', 'zero-to-d');
|
|
36
|
+
}
|
|
37
|
+
if (/^(fa-|(?!fa-))[e-o]/.test(this.name)) {
|
|
38
|
+
return updateAttribute(this.#$icon, 'class', 'e-to-o');
|
|
39
|
+
}
|
|
40
|
+
if (/^(fa-|(?!fa-))[p-z]/.test(this.name)) {
|
|
41
|
+
return updateAttribute(this.#$icon, 'class', 'p-to-z');
|
|
42
|
+
}
|
|
43
|
+
}
|
|
32
44
|
});
|
package/icon/types.d.ts
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
|
+
import type { TSinchIcons } from './generated-icon-type';
|
|
1
2
|
import type { TSinchElementReact } from '../types';
|
|
3
|
+
export { TSinchIcons };
|
|
2
4
|
export type TSinchIconElement = HTMLElement & {
|
|
3
5
|
/** Icon name */
|
|
4
|
-
name:
|
|
6
|
+
name: TSinchIcons;
|
|
5
7
|
/** Icon name */
|
|
6
8
|
setAttribute(name: 'name', value: string): void;
|
|
7
9
|
};
|
|
8
10
|
export type TSinchIconReact = TSinchElementReact<TSinchIconElement> & {
|
|
9
11
|
/** Icon name */
|
|
10
|
-
name:
|
|
12
|
+
name: TSinchIcons;
|
|
13
|
+
style?: {
|
|
14
|
+
'--sinch-global-size-icon'?: string;
|
|
15
|
+
'--sinch-global-color-icon'?: string;
|
|
16
|
+
};
|
|
11
17
|
};
|
package/inline-alert/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import '../rich-text';
|
|
|
3
3
|
import '../text';
|
|
4
4
|
import '../title';
|
|
5
5
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
|
|
6
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:4px;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#action{width:100%;display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon
|
|
6
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:4px;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#action{width:100%;display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon name="circle-info" id="icon-info"></sinch-icon><sinch-icon name="circle-check" id="icon-success"></sinch-icon><sinch-icon name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon name="octagon-exclamation" id="icon-error"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
|
|
7
7
|
import { typeValues } from './utils';
|
|
8
8
|
const template = document.createElement('template');
|
|
9
9
|
template.innerHTML = templateHTML;
|
package/link/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../icon';
|
|
2
2
|
import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, isAttrEqual } from '../utils';
|
|
3
|
-
const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix"> </span><sinch-icon
|
|
3
|
+
const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix"> </span><sinch-icon name="fa-arrow-up-right-from-square" id="external-icon"></sinch-icon><sinch-icon name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
|
|
4
4
|
const template = document.createElement('template');
|
|
5
5
|
template.innerHTML = templateHTML;
|
|
6
6
|
defineCustomElement('sinch-link', class extends NectaryElement {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nectary/components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"**/*/*.css",
|
|
6
6
|
"**/*/*.json",
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
"build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "^7.22.15"
|
|
22
|
+
"@babel/runtime": "^7.22.15",
|
|
23
|
+
"@nectary/assets": "2.1.1"
|
|
23
24
|
},
|
|
24
25
|
"devDependencies": {
|
|
25
26
|
"@babel/cli": "^7.22.15",
|
package/pagination/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../icon';
|
|
2
2
|
import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, isTargetEqual, getTargetIndexInParent } from '../utils';
|
|
3
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon
|
|
3
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon name="fa-angle-left" id="icon-left"></sinch-icon></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon name="fa-angle-right" id="icon-right"></sinch-icon></button></div>';
|
|
4
4
|
const NUM_BUTTONS = 7;
|
|
5
5
|
const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
|
|
6
6
|
const FIRST_BTN_INDEX = 0;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import '../icon';
|
|
1
2
|
import '../text';
|
|
2
3
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
|
|
3
|
-
const templateHTML = '<style>:host{display:block;outline:0}#button{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;height:100%;padding:8px 4px 4px;box-sizing:border-box;cursor:pointer;border-radius:var(--sinch-comp-progress-stepper-step-shape-radius)}:host([data-status=inactive])>#button{cursor:not-allowed}:host([data-status=incomplete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-background-hover)}:host([data-status=complete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-complete-background-hover)}:host([data-status=invalid]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-background-hover)}#outline{position:absolute;inset:-2px;border:2px solid var(--sinch-comp-progress-stepper-step-color-outline-focus);border-radius:calc(var(--sinch-comp-progress-stepper-step-shape-radius) + 2px);pointer-events:none;opacity:0}:host(:focus-visible) #outline{opacity:1}#text{flex-shrink:1;flex-basis:auto;min-width:0;transform:translate(0,0);will-change:transform;transition:transform .25s ease-out;padding-right:24px}:host([data-status=incomplete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-label)}:host([data-status=complete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-label)}:host([data-status=inactive]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-inactive-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-inactive-label)}:host([invalid]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-label);transform:translate(24px,0)}:host([data-status=incomplete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-current-label)}:host([data-status=complete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-current-label)}:host([invalid][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-current-label)}#icon-error{position:absolute;left:0;top:4px;pointer-events:none;opacity:0;transition:opacity .25s ease-in-out;--sinch-global-color-icon:var(--sinch-comp-progress-stepper-step-color-invalid-icon-default);--sinch-global-size-icon:16px}:host([invalid]) #icon-error{opacity:1}#progress{height:8px;border-radius:4px;transition:background-color .25s ease-in-out}:host([data-status=incomplete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-background)}:host([data-status=complete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-background)}:host([data-status=inactive]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-inactive-progress-background)}:host([invalid]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-progress-background)}#bar{width:8px;height:8px;border-radius:4px;opacity:0;transition:width .25s ease-in-out,opacity .25s ease-in-out}:host([data-status=incomplete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-bar)}:host([data-status=complete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-bar);width:100%}:host([data-status=complete]:not([invalid])) #bar,:host([data-status=incomplete]:not([invalid])) #bar{opacity:1}#label-bar{position:relative}</style><div id="button"><div id="progress"><div id="bar"></div></div><div id="label-bar"><sinch-icon
|
|
4
|
+
const templateHTML = '<style>:host{display:block;outline:0}#button{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;height:100%;padding:8px 4px 4px;box-sizing:border-box;cursor:pointer;border-radius:var(--sinch-comp-progress-stepper-step-shape-radius)}:host([data-status=inactive])>#button{cursor:not-allowed}:host([data-status=incomplete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-background-hover)}:host([data-status=complete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-complete-background-hover)}:host([data-status=invalid]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-background-hover)}#outline{position:absolute;inset:-2px;border:2px solid var(--sinch-comp-progress-stepper-step-color-outline-focus);border-radius:calc(var(--sinch-comp-progress-stepper-step-shape-radius) + 2px);pointer-events:none;opacity:0}:host(:focus-visible) #outline{opacity:1}#text{flex-shrink:1;flex-basis:auto;min-width:0;transform:translate(0,0);will-change:transform;transition:transform .25s ease-out;padding-right:24px}:host([data-status=incomplete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-label)}:host([data-status=complete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-label)}:host([data-status=inactive]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-inactive-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-inactive-label)}:host([invalid]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-label);transform:translate(24px,0)}:host([data-status=incomplete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-current-label)}:host([data-status=complete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-current-label)}:host([invalid][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-current-label)}#icon-error{position:absolute;left:0;top:4px;pointer-events:none;opacity:0;transition:opacity .25s ease-in-out;--sinch-global-color-icon:var(--sinch-comp-progress-stepper-step-color-invalid-icon-default);--sinch-global-size-icon:16px}:host([invalid]) #icon-error{opacity:1}#progress{height:8px;border-radius:4px;transition:background-color .25s ease-in-out}:host([data-status=incomplete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-background)}:host([data-status=complete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-background)}:host([data-status=inactive]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-inactive-progress-background)}:host([invalid]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-progress-background)}#bar{width:8px;height:8px;border-radius:4px;opacity:0;transition:width .25s ease-in-out,opacity .25s ease-in-out}:host([data-status=incomplete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-bar)}:host([data-status=complete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-bar);width:100%}:host([data-status=complete]:not([invalid])) #bar,:host([data-status=incomplete]:not([invalid])) #bar{opacity:1}#label-bar{position:relative}</style><div id="button"><div id="progress"><div id="bar"></div></div><div id="label-bar"><sinch-icon name="triangle-exclamation" id="icon-error" aria-hidden="true"></sinch-icon><sinch-text id="text" type="m"></sinch-text></div><div id="outline"></div></div>';
|
|
4
5
|
import { ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, ATTR_PROGRESS_STEPPER_ITEM_STATUS, isProgressStepperItemActive, isProgressStepperItemActiveDescendant } from './utils';
|
|
5
6
|
const template = document.createElement('template');
|
|
6
7
|
template.innerHTML = templateHTML;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../icon';
|
|
2
2
|
import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
|
|
3
|
-
const templateHTML = '<style>:host{display:block;--sinch-global-size-icon:32px}#icon-dropdown{display:block;will-change:transform;transform:rotate(180deg)}:host([value]:not([value=false])) #icon-dropdown{transform:rotate(0)}</style><sinch-button id="button" size="s"><sinch-icon id="icon-dropdown" slot="icon"
|
|
3
|
+
const templateHTML = '<style>:host{display:block;--sinch-global-size-icon:32px}#icon-dropdown{display:block;will-change:transform;transform:rotate(180deg)}:host([value]:not([value=false])) #icon-dropdown{transform:rotate(0)}</style><sinch-button id="button" size="s"><sinch-icon name="fa-chevron-down" id="icon-dropdown" slot="icon"></sinch-icon></sinch-button>';
|
|
4
4
|
const template = document.createElement('template');
|
|
5
5
|
template.innerHTML = templateHTML;
|
|
6
6
|
defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
|
package/select-button/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import '../text';
|
|
|
2
2
|
import '../icon';
|
|
3
3
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, isAttrEqual } from '../utils';
|
|
4
4
|
import { DEFAULT_SIZE, sizeValues } from '../utils/size';
|
|
5
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon
|
|
5
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon name="fa-chevron-down" id="dropdown-icon"></sinch-icon></div>';
|
|
6
6
|
const template = document.createElement('template');
|
|
7
7
|
template.innerHTML = templateHTML;
|
|
8
8
|
defineCustomElement('sinch-select-button', class extends NectaryElement {
|
package/select-menu/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import '../input';
|
|
|
2
2
|
import '../icon';
|
|
3
3
|
import '../text';
|
|
4
4
|
import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, hasClass, isTargetEqual } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon id="icon-search" slot="icon"
|
|
5
|
+
const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
|
|
6
6
|
const ITEM_HEIGHT = 40;
|
|
7
7
|
const NUM_ITEMS_SEARCH = 7;
|
|
8
8
|
const template = document.createElement('template');
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../icon';
|
|
2
2
|
import '../text';
|
|
3
3
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
|
|
4
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon
|
|
4
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon name="fa-check" id="icon-check"></sinch-icon></div>';
|
|
5
5
|
const template = document.createElement('template');
|
|
6
6
|
template.innerHTML = templateHTML;
|
|
7
7
|
export class SelectMenuOption extends NectaryElement {
|
package/standalone.d.ts
CHANGED
|
@@ -5,6 +5,8 @@ import './action-menu/index.js';
|
|
|
5
5
|
import './alert/index.js';
|
|
6
6
|
import './avatar/index.js';
|
|
7
7
|
import './badge/index.js';
|
|
8
|
+
import './button-group-item/index.js';
|
|
9
|
+
import './button-group/index.js';
|
|
8
10
|
import './button/index.js';
|
|
9
11
|
import './card-container/index.js';
|
|
10
12
|
import './card/index.js';
|
|
@@ -35,6 +37,7 @@ import './link/index.js';
|
|
|
35
37
|
import './list-item/index.js';
|
|
36
38
|
import './list/index.js';
|
|
37
39
|
import './pagination/index.js';
|
|
40
|
+
import './persistent-overlay/index.js';
|
|
38
41
|
import './pop/index.js';
|
|
39
42
|
import './popover/index.js';
|
|
40
43
|
import './progress-stepper-item/index.js';
|
package/standalone.js
CHANGED
|
@@ -7,6 +7,8 @@ import './action-menu/index.js';
|
|
|
7
7
|
import './alert/index.js';
|
|
8
8
|
import './avatar/index.js';
|
|
9
9
|
import './badge/index.js';
|
|
10
|
+
import './button-group-item/index.js';
|
|
11
|
+
import './button-group/index.js';
|
|
10
12
|
import './button/index.js';
|
|
11
13
|
import './card-container/index.js';
|
|
12
14
|
import './card/index.js';
|
|
@@ -37,6 +39,7 @@ import './link/index.js';
|
|
|
37
39
|
import './list-item/index.js';
|
|
38
40
|
import './list/index.js';
|
|
39
41
|
import './pagination/index.js';
|
|
42
|
+
import './persistent-overlay/index.js';
|
|
40
43
|
import './pop/index.js';
|
|
41
44
|
import './popover/index.js';
|
|
42
45
|
import './progress-stepper-item/index.js';
|
package/standalone.ts
CHANGED
|
@@ -13,6 +13,8 @@ import './action-menu/index.js'
|
|
|
13
13
|
import './alert/index.js'
|
|
14
14
|
import './avatar/index.js'
|
|
15
15
|
import './badge/index.js'
|
|
16
|
+
import './button-group-item/index.js'
|
|
17
|
+
import './button-group/index.js'
|
|
16
18
|
import './button/index.js'
|
|
17
19
|
import './card-container/index.js'
|
|
18
20
|
import './card/index.js'
|
|
@@ -43,6 +45,7 @@ import './link/index.js'
|
|
|
43
45
|
import './list-item/index.js'
|
|
44
46
|
import './list/index.js'
|
|
45
47
|
import './pagination/index.js'
|
|
48
|
+
import './persistent-overlay/index.js'
|
|
46
49
|
import './pop/index.js'
|
|
47
50
|
import './popover/index.js'
|
|
48
51
|
import './progress-stepper-item/index.js'
|
package/time-picker/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import '../icon';
|
|
|
2
2
|
import '../segmented-control';
|
|
3
3
|
import '../segmented-control-option';
|
|
4
4
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">:</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon id="icon-submit" slot="icon"
|
|
5
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">:</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
|
|
6
6
|
import { getNeedleRotationDeg, getShortestCssDeg, hourToIndex, parseTime, stringifyHour, stringifyHourFace, stringifyMinute, stringifyTime } from './utils';
|
|
7
7
|
const template = document.createElement('template');
|
|
8
8
|
template.innerHTML = templateHTML;
|
package/toast/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../icon';
|
|
2
2
|
import '../rich-text';
|
|
3
3
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
|
|
4
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon
|
|
4
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon name="circle-info" id="icon-info"></sinch-icon><sinch-icon name="circle-check" id="icon-success"></sinch-icon><sinch-icon name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
|
|
5
5
|
import { typeValues } from './utils';
|
|
6
6
|
const TIMEOUT = 5000;
|
|
7
7
|
const template = document.createElement('template');
|
package/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react'
|
|
1
|
+
import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react'
|
|
2
2
|
|
|
3
3
|
export type TSinchElementReact<TElement> =
|
|
4
4
|
Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> &
|
|
@@ -2,7 +2,7 @@ import '../icon';
|
|
|
2
2
|
import '../title';
|
|
3
3
|
import '../text';
|
|
4
4
|
import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-local-color-background);font:var(--sinch-sys-font-desktop-title-s);line-height:32px;text-align:center;color:var(--sinch-local-color-text);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-default);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-default);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-default);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-default);--sinch-global-size-icon:20px}:host([data-progress=active]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-active);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-active);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-active);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-active)}:host([data-progress=done]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited)}:host([data-progress=done][status=error]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited-error);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited-error);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited-error);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited-error)}:host([data-progress=done][status=skip]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited-skip);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited-skip);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited-skip);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited-skip)}#icon-error,#icon-success{display:none}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}#content{display:none;padding:16px 0 16px 40px}:host([data-progress=active]) #content{display:block}#progress{position:absolute;width:1px;left:15.5px;top:32px;bottom:0;background-color:var(--sinch-comp-vertical-stepper-color-progress)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-comp-vertical-stepper-color-progress-visited);left:0;top:0}:host([data-progress=done]) #bar{height:100%}:host(:last-of-type) #progress{display:none}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{--sinch-global-color-text:var(--sinch-comp-vertical-stepper-color-label)}#description{--sinch-global-color-text:var(--sinch-comp-vertical-stepper-color-description)}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon
|
|
5
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-local-color-background);font:var(--sinch-sys-font-desktop-title-s);line-height:32px;text-align:center;color:var(--sinch-local-color-text);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-default);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-default);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-default);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-default);--sinch-global-size-icon:20px}:host([data-progress=active]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-active);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-active);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-active);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-active)}:host([data-progress=done]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited)}:host([data-progress=done][status=error]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited-error);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited-error);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited-error);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited-error)}:host([data-progress=done][status=skip]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited-skip);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited-skip);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited-skip);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited-skip)}#icon-error,#icon-success{display:none}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}#content{display:none;padding:16px 0 16px 40px}:host([data-progress=active]) #content{display:block}#progress{position:absolute;width:1px;left:15.5px;top:32px;bottom:0;background-color:var(--sinch-comp-vertical-stepper-color-progress)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-comp-vertical-stepper-color-progress-visited);left:0;top:0}:host([data-progress=done]) #bar{height:100%}:host(:last-of-type) #progress{display:none}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{--sinch-global-color-text:var(--sinch-comp-vertical-stepper-color-label)}#description{--sinch-global-color-text:var(--sinch-comp-vertical-stepper-color-description)}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon name="fa-check" id="icon-success"></sinch-icon><sinch-icon name="fa-exclamation" id="icon-error"></sinch-icon><span id="circle-text"></span></div><div id="label-wrapper"><sinch-title id="label" type="s" level="3" ellipsis></sinch-title><sinch-text id="description" type="xs" ellipsis></sinch-text></div></div><div id="content"><slot></slot></div></div>';
|
|
6
6
|
import { statusValues } from './utils';
|
|
7
7
|
const template = document.createElement('template');
|
|
8
8
|
template.innerHTML = templateHTML;
|