@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../components/date-picker/date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './date-picker.styles';\nimport './calendar/calendar';\nimport { consume } from '@lit/context';\nimport { Cre8ElementInternals, formInternalsContext } from '../contexts/form-internals-context';\nimport { Cre8Field } from '../field/field';\n\n/**\n * The Date Picker component renders a form group with label, control, help text and validation styling much\n * like the Field component but exclusively for type=date.\n * Cre8DatePicker inherits the Cre8Field component.\n */\nexport class Cre8DatePicker extends Cre8Field {\n  field!: HTMLInputElement;\n  override type: 'text' | 'email' | 'number' | 'url' | 'tel' | 'password' | 'date' = 'date';\n\n  @consume({ context: formInternalsContext })\n  _internals: Cre8ElementInternals;\n\n  /**\n   * The type of the form field.\n   * For Date Picker, this is always 'date'.\n   */\n  static styles = [styles];\n\n  @state() showCalendar = false;\n\n  /**\n   * Quick Shortcuts Variant\n   * @attr {boolean}\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n  hasShortcuts?: boolean;\n\n  @property()\n  label: string;\n\n  /**\n   * Handle Date On Input\n   * 1) Set the input's value equal to the event.target.value when the input is changed.\n   * 2) Set the internal form value of the input to the updated value\n   */\n  private handleDateOnInput(e: Event) {\n    /* 1 */\n    this.value = (e.target as HTMLInputElement).value;\n\n    /* 2 */\n    this._internals.setFormValue(this.value);\n  }\n\n  private handleCalendarSelect(e: CustomEvent) {\n    this.value = e.detail.date;\n\n    this._internals.setFormValue(this.value);\n    this.showCalendar = false;\n  }\n\n  private handleOutsideClick(e: CustomEvent) {\n    const calendarIcon = this.renderRoot.querySelector('.cre8-c-date-picker');\n\n    if (this.showCalendar && !e.detail.composedPath.includes(calendarIcon)) {\n      this.showCalendar = false;\n    }\n  }\n\n  private toggleCalendar() {\n    if (!this.disabled && !this._internals.readonly) {\n      this.showCalendar = !this.showCalendar;\n    }\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-date-picker', {\n      'cre8-is-error': this.isError,\n      'cre8-is-success': this.isSuccess,\n      'cre8-c-date-picker--disabled': this.disabled,\n      'cre8-c-date-picker--read-only': this._internals.readonly,\n    });\n\n    this.type = 'date';\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-date-picker__label\" for=\"${this.fieldId}\"\n          >${this.label}</label\n        >\n        <div class=\"cre8-c-date-picker__body\">\n          <input\n            class=\"cre8-c-date-picker__input\"\n            autocomplete=${ifDefined(this._internals.autocomplete)}\n            type=\"${this.type}\"\n            id=\"${this.id}\"\n            name=\"${ifDefined(this.name)}\"\n            max=${ifDefined(this._internals.max)}\n            min=${ifDefined(this._internals.min)}\n            value=\"${ifDefined(this.value)}\"\n            ?readonly=${this._internals.readonly}\n            ?required=${this.required}\n            ?disabled=\"${this.disabled}\"\n            placeholder=\"${ifDefined(this._internals.placeholder)}\"\n            @input=${this.handleDateOnInput}\n            @click=${this.toggleCalendar}\n          />\n          <cre8-button\n            class=\"cre8-c-date-picker__calendar-icon-button\"\n            aria-expanded=\"${this.showCalendar}\"\n            aria-label=\"Show Calendar\"\n            ?disabled=\"${this.disabled || this.readonly}\"\n            ?hideText=${true}\n            iconName=\"calendar-datepicker\"\n            variant=\"tertiary\"\n            @click=\"${this.toggleCalendar}\"\n          ></cre8-button>\n        </div>\n        ${this.showCalendar\n        ? html`<cre8-calendar\n              fieldDate=\"${ifDefined(this.value)}\"\n              ?hasShortcuts=${this.hasShortcuts}\n              @dateSelect=\"${this.handleCalendarSelect}\"\n              @outsideClick=\"${this.handleOutsideClick}\"\n            ></cre8-calendar>`\n        : nothing}\n        ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note\n              id=${this.ariaDescribedBy}\n              class=\"cre8-c-date-picker__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n        : nothing}\n        ${this.renderSuccessErrorFieldNote()}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-date-picker') === undefined) {\n  customElements.define('cre8-date-picker', Cre8DatePicker);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-date-picker': Cre8DatePicker;\n  }\n}\n\nexport default Cre8DatePicker;\n"]}

package/lib/components/date-picker/date-picker.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=date-picker.styles.d.ts.map

package/lib/components/date-picker/date-picker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../components/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA00K,CAAC;AACv1K,eAAe,MAAM,CAAC"}

package/lib/components/date-picker/date-picker.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-date-picker__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-date-picker__body{position:relative;display:flex;align-items:center}input::-webkit-calendar-picker-indicator{display:none}input[type=date]::-webkit-input-placeholder{visibility:hidden !important}.cre8-c-date-picker__calendar-icon-button{position:absolute;right:0.5rem;background:var(--cre8-color-bg-default);border:none;border-radius:0;--cre8-icon-height: size(3);--cre8-icon-width: size(3)}.cre8-c-date-picker--disabled .cre8-c-date-picker__calendar-icon-button,.cre8-c-date-picker--read-only .cre8-c-date-picker__calendar-icon-button{background:var(--cre8-color-bg-disabled)}.cre8-c-date-picker__input{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-date-picker__input:hover:not(:disabled),.cre8-c-date-picker__input:focus:not(:disabled),.cre8-c-date-picker__input:active:not(:disabled),.cre8-c-date-picker__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-date-picker__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-date-picker__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-date-picker__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input{border-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`;
+export default styles;
+//# sourceMappingURL=date-picker.styles.js.map

package/lib/components/date-picker/date-picker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.styles.js","sourceRoot":"","sources":["../../../components/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,o0KAAo0K,CAAC;AACv1K,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-date-picker__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-date-picker__body{position:relative;display:flex;align-items:center}input::-webkit-calendar-picker-indicator{display:none}input[type=date]::-webkit-input-placeholder{visibility:hidden !important}.cre8-c-date-picker__calendar-icon-button{position:absolute;right:0.5rem;background:var(--cre8-color-bg-default);border:none;border-radius:0;--cre8-icon-height: size(3);--cre8-icon-width: size(3)}.cre8-c-date-picker--disabled .cre8-c-date-picker__calendar-icon-button,.cre8-c-date-picker--read-only .cre8-c-date-picker__calendar-icon-button{background:var(--cre8-color-bg-disabled)}.cre8-c-date-picker__input{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-date-picker__input:hover:not(:disabled),.cre8-c-date-picker__input:focus:not(:disabled),.cre8-c-date-picker__input:active:not(:disabled),.cre8-c-date-picker__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-date-picker__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-date-picker__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-date-picker__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input{border-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`;\nexport default styles;\n"]}

package/lib/components/divider/divider.d.ts

@@ -0,0 +1,29 @@
+import { Cre8Element } from '../cre8-element';
+/**
+ * The divider component is a separator between sections of content or groups of items.
+ * It often contains a horizontal or vertical line.
+*/
+export declare class Cre8Divider extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Divider variants
+     * - By default, the component renders the horizontal divider
+     * - **vertical** renders the vertical divider
+    */
+    variant: 'horizontal' | 'vertical';
+    /**
+     * Status (a color variant prop)
+     * - By default, the divider has gray color.
+     * - **brand**, the divider has blue color.
+     * - **knockout**, the divider has white color.
+     */
+    status?: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-divider': Cre8Divider;
+    }
+}
+export default Cre8Divider;
+//# sourceMappingURL=divider.d.ts.map

package/lib/components/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../components/divider/divider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;EAGE;AAEF,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;MAIE;IAEE,OAAO,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEtD;;;;;OAKG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB,MAAM;CAUP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}