@universal-material/web 3.0.27 → 3.0.29

package/checkbox/checkbox.styles.js

@@ -0,0 +1,126 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_state-layer-padding: var(--u-checkbox-state-layer-padding, 4px);
+    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
+    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .container {
+    cursor: pointer;
+    position: relative;
+    width: var(--_width);
+    height: var(--_height);
+    padding: var(--_state-layer-padding);
+    border-radius: var(--u-shape-corner-full, 9999px);
+  }
+
+  :host([hide-state-layer]) .container {
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    padding: 0;
+  }
+  :host([hide-state-layer]) u-ripple {
+    display: none;
+  }
+
+  input {
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    border-radius: inherit;
+    appearance: none;
+  }
+
+  u-ripple {
+    padding: var(--_state-layer-padding);
+  }
+
+  .indicator-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  input:checked ~ .indicator-container {
+    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));
+  }
+
+  :host([disabled]) {
+    opacity: var(--u-checkbox-disabled-state-opacity, 0.38);
+  }
+  :host([disabled]) input,
+  :host([disabled]) .container {
+    cursor: default;
+  }
+  :host([disabled]) .indicator-container {
+    --_indicator-color: var(--u-checkbox-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+  }
+
+  :host {
+    --_indicator-size: var(--u-checkbox-size, 1.125rem);
+    --_width: var(--u-checkbox-size, 3rem);
+    --_height: var(--_width);
+  }
+
+  .border {
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;
+    border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);
+    transition: box-shadow 175ms 175ms;
+  }
+
+  .indicator {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    overflow: hidden;
+    clip: rect(0, 0, var(--_indicator-size), 0);
+    transition: clip 275ms;
+  }
+  .indicator::before {
+    position: relative;
+    top: 25%;
+    box-sizing: border-box;
+    display: block;
+    width: 0.75rem;
+    height: 0.35rem;
+    content: "";
+    border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary);
+    border-top-style: none;
+    border-right-style: none;
+    transform: rotate(-45deg);
+    transition: border 175ms, transform 175ms;
+  }
+
+  input.indeterminate ~ .indicator-container .border,
+  input:checked ~ .indicator-container .border {
+    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;
+    transition: box-shadow 175ms;
+  }
+  input.indeterminate ~ .indicator-container .indicator,
+  input:checked ~ .indicator-container .indicator {
+    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);
+    transition: clip 175ms 175ms;
+  }
+
+  input.indeterminate ~ .indicator-container {
+    --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));
+  }
+  input.indeterminate ~ .indicator-container .indicator::before {
+    border-left-style: none;
+    transform: rotate(0);
+    width: 0.6rem;
+  }
+`;
+//# sourceMappingURL=checkbox.styles.js.map

package/checkbox/checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_state-layer-padding: var(--u-checkbox-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-checkbox-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_indicator-size: var(--u-checkbox-size, 1.125rem);\n    --_width: var(--u-checkbox-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .border {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;\n    border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);\n    transition: box-shadow 175ms 175ms;\n  }\n\n  .indicator {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    overflow: hidden;\n    clip: rect(0, 0, var(--_indicator-size), 0);\n    transition: clip 275ms;\n  }\n  .indicator::before {\n    position: relative;\n    top: 25%;\n    box-sizing: border-box;\n    display: block;\n    width: 0.75rem;\n    height: 0.35rem;\n    content: \"\";\n    border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary);\n    border-top-style: none;\n    border-right-style: none;\n    transform: rotate(-45deg);\n    transition: border 175ms, transform 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container .border,\n  input:checked ~ .indicator-container .border {\n    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;\n    transition: box-shadow 175ms;\n  }\n  input.indeterminate ~ .indicator-container .indicator,\n  input:checked ~ .indicator-container .indicator {\n    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);\n    transition: clip 175ms 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n  input.indeterminate ~ .indicator-container .indicator::before {\n    border-left-style: none;\n    transform: rotate(0);\n    width: 0.6rem;\n  }\n`;\n"]}

package/config.d.ts

@@ -1,4 +1,7 @@
 export declare const config: {
+    fields: {
+        defaultAppearance: "filled" | "outlined";
+    };
     navigationDrawer: {
         useSwiperJs: boolean;
     };

package/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,MAAM;;;;CAAU,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,MAAM;;;;;;;CAAU,CAAC"}

package/config.js

@@ -1,4 +1,7 @@
 const _config = {
+    fields: {
+        defaultAppearance: 'filled'
+    },
     navigationDrawer: {
         useSwiperJs: false
     }

package/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG;IACd,gBAAgB,EAAE;QAChB,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC","sourcesContent":["const _config = {\n  navigationDrawer: {\n    useSwiperJs: false\n  }\n};\n\nexport const config = _config;\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG;IACd,MAAM,EAAE;QACN,iBAAiB,EAAE,QAAiC;KACrD;IACD,gBAAgB,EAAE;QAChB,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC","sourcesContent":["const _config = {\n  fields: {\n    defaultAppearance: 'filled' as 'filled' | 'outlined'\n  },\n  navigationDrawer: {\n    useSwiperJs: false\n  }\n};\n\nexport const config = _config;\n"]}