@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/select-tile/select-tile.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile.styles.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,+iVAA+iV,CAAC;AAClkV,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:inline-flex}.cre8-c-select-tile{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;height:100%;width:100%;padding:1rem;gap:1rem;border-color:var(--cre8-color-border-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);border-style:solid;background:var(--cre8-color-bg-default)}.cre8-c-select-tile:hover,.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible,.cre8-c-select-tile:active{background:var(--cre8-color-bg-default-hover);border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile.cre8-c-select-tile--error{border-color:var(--cre8-color-border-error);background:var(--cre8-color-bg-error)}.cre8-c-select-tile.cre8-c-select-tile--success{border-color:var(--cre8-color-border-success);background:var(--cre8-color-bg-success)}.cre8-c-select-tile.cre8-c-select-tile--disabled{border-color:var(--cre8-color-border-disabled);background:var(--cre8-color-bg-disabled);cursor:not-allowed}input:checked+.cre8-c-select-tile{border-width:2px;border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile__input{display:none}.cre8-c-select-tile--horizontal{flex-direction:row;align-items:center;justify-content:center}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm{flex-direction:column}.cre8-c-select-tile--vertical-at-sm .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm-2{flex-direction:column}.cre8-c-select-tile--vertical-at-sm-2 .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 768px){.cre8-c-select-tile--vertical-at-md{flex-direction:column}.cre8-c-select-tile--vertical-at-md .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 960px){.cre8-c-select-tile--vertical-at-lg{flex-direction:column}.cre8-c-select-tile--vertical-at-lg .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1200px){.cre8-c-select-tile--vertical-at-xl{flex-direction:column}.cre8-c-select-tile--vertical-at-xl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1400px){.cre8-c-select-tile--vertical-at-xxl{flex-direction:column}.cre8-c-select-tile--vertical-at-xxl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}.cre8-c-select-tile--bare{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none}.cre8-c-select-tile--horizontal-bare{flex-direction:row;border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none;align-items:center;justify-content:center}.cre8-c-select-tile--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-select-tile__header{display:block;flex:none}.cre8-c-select-tile__body{display:block;flex:1 1 auto}.cre8-c-select-tile--bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-select-tile__body .cre8-c-select-tile__body_body{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)}.cre8-c-select-tile__footer{display:flex;flex:none}.cre8-c-select-tile--bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-left,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-left{order:-1}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-none,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-none{display:none}.cre8-c-select-tile__custom-radio{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-default)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-strong);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-select-tile__custom-radio-top-right{position:absolute;top:0.5rem;right:0.5rem}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__icon{display:flex}.cre8-c-select-tile__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__inner-circle{flex:none;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle{background:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle{display:flex}.cre8-c-select-tile__custom-checkbox{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-small);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-checkbox{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.cre8-c-select-tile--error input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default)}.cre8-c-select-tile--disabled input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-select-tile__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-select-tile--error .cre8-c-select-tile__icon{color:var(--cre8-color-content-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__icon{color:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon{display:flex}`;\nexport default styles;\n"]}

package/lib/components/select-tile-list/select-tile-list.d.ts

@@ -0,0 +1,52 @@
+import { Cre8Element } from '../cre8-element';
+import '../field-note/field-note';
+/**
+ * Select Tile List is a container design to hold multiple Select Tile Components.
+ *
+ * @slot "" - The default slot norminally contains multiple `<select-tile />` Components.
+ * @cssprop "--cre8-select-tile-list-item-width" - Width of each child. Not used for horizontal.
+ */
+export declare class Cre8SelectTileList extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether to show the tiles side by side (columns) or stacked vertically (rows).
+     */
+    variant: 'columns' | 'rows';
+    /**
+     * Select Tile container label
+     */
+    label?: string;
+    /**
+     * Select Tile container fieldnote
+     */
+    fieldNote?: string;
+    /**
+     * Select Tile container fieldnote aria describe by
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Select Tile container fieldnote icon name
+     */
+    fieldNoteIconName?: string;
+    /**
+     * Select Tile container fieldnote knockout
+     */
+    fieldNoteKnockout?: boolean;
+    /**
+     * Select Tile container fieldnote isSuccess
+     */
+    fieldNoteIsSuccess?: boolean;
+    /**
+     * Select Tile container fieldnote isError
+     */
+    fieldNoteIsError?: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-select-tile-list': Cre8SelectTileList;
+    }
+}
+export default Cre8SelectTileList;
+//# sourceMappingURL=select-tile-list.d.ts.map

package/lib/components/select-tile-list/select-tile-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-list.d.ts","sourceRoot":"","sources":["../../../components/select-tile-list/select-tile-list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAGlC;;;;;GAKG;AACH,qBAAa,kBAAmB,SAAQ,WAAW;IAC/C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,OAAO,EAAE,SAAS,GAAG,MAAM,CAAa;IAE5C;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IAEC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IAEC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE/B,iBAAiB;IAOjB,MAAM;CA+BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF;AAED,eAAe,kBAAkB,CAAC"}