@sneat/components 0.1.0

package/src/sneat-styles.scss

@@ -0,0 +1,258 @@
+@use 'sass:meta';
+
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+///* Core CSS required for Ionic components to work properly */
+//@import '~@ionic/angular/css/core.css';
+//
+///* Basic CSS for apps built with Ionic */
+//@import '~@ionic/angular/css/normalize.css';
+//@import '~@ionic/angular/css/structure.css';
+//@import '~@ionic/angular/css/typography.css';
+//@import '~@ionic/angular/css/display.css';
+//
+///* Optional CSS utils that can be commented out */
+//@import '~@ionic/angular/css/padding.css';
+//@import '~@ionic/angular/css/float-elements.css';
+//@import '~@ionic/angular/css/text-alignment.css';
+//@import '~@ionic/angular/css/text-transformation.css';
+//@import '~@ionic/angular/css/flex-utils.css';
+
+@include meta.load-css('sneat-grid-layout');
+@include meta.load-css('theme/variables.scss');
+
+//noinspection CssUnknownTarget
+@include meta.load-css('lib/virtual-slider/virtual-slider.scss');
+
+// https://ionicframework.com/docs/theming/colors
+:root {
+  --ion-color-divider: #f0f7ff;
+  --ion-color-divider-rgb: 240, 247, 255;
+  --ion-color-divider-contrast: #000000;
+  --ion-color-divider-contrast-rgb: 0, 0, 0;
+  --ion-color-divider-shade: #d3d9e0;
+  --ion-color-divider-tint: #f2f8ff;
+}
+
+.ion-color-divider {
+  --ion-color-base: var(--ion-color-divider);
+  --ion-color-base-rgb: var(--ion-color-divider-rgb);
+  --ion-color-contrast: var(--ion-color-divider-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-divider-contrast-rgb);
+  --ion-color-shade: var(--ion-color-divider-shade);
+  --ion-color-tint: var(--ion-color-divider-tint);
+}
+.cardy {
+  //--ion-background-color: #fcfcfc;
+}
+
+.cardy ion-card {
+  --ion-background-color: #ffffff;
+  background-color: #ffffff;
+}
+
+.sneat-tiny-start-padding {
+  --padding-start: 0.25em;
+}
+
+.sneat-small-start-padding {
+  --padding-start: 0.5em;
+}
+
+.sneat-small-end-padding {
+  --inner-padding-end: 0.5em;
+}
+
+.sneat-tiny-end-padding {
+  --inner-padding-end: 0.25em;
+}
+
+.sneat-no-end-padding-margin {
+  --inner-padding-end: 0;
+  --margin-end: 0;
+}
+
+.sneat-no-end-padding {
+  --inner-padding-end: 0;
+}
+
+.sneat-small-end-margin {
+  margin-right: 0.5em;
+}
+
+.sneat-tiny-end-margin {
+  margin-right: 0.25em;
+}
+
+ion-buttons.sneat-no-horizontal-margins ion-button {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.sneat-no-end-margin {
+  margin-right: 0;
+}
+
+.sneat-no-bottom-margin {
+  margin-bottom: 0;
+  --margin-bottom: 0;
+}
+
+.sneat-no-bottom-padding {
+  padding-bottom: 0;
+  --padding-bottom: 0;
+}
+
+ion-item.sneat-no-bottom-border {
+  --border-width: 0;
+  --inner-border-width: 0;
+}
+
+ion-modal.auto-height {
+  --height: auto;
+
+  //.modal-wrapper {
+  //width: 90vw;
+
+  .ion-page {
+    position: relative;
+    contain: content;
+    max-height: 90vh;
+
+    .modal-content {
+      overflow: auto;
+    }
+  }
+
+  //}
+}
+
+@media screen and (max-width: 766px) {
+  // 768=PAL @ https://en.wikipedia.org/wiki/Computer_display_standard
+  .sneat-hide-if-width-less-766 {
+    display: none;
+  }
+  .sneat-hide-if-width-less-766 {
+    font-size: smaller;
+  }
+  .sneat-hide-if-width-less-766 {
+    font-size: small;
+  }
+}
+
+@media screen and (max-width: 530px) {
+  // 640=VGA @ https://en.wikipedia.org/wiki/Computer_display_standard
+  .sneat-hide-if-width-less-638 {
+    display: none;
+  }
+  .sneat-smaller-if-width-less-638 {
+    font-size: smaller;
+  }
+  .sneat-small-if-width-less-638 {
+    font-size: small;
+  }
+}
+
+@media screen and (max-width: 530px) {
+  .sneat-hide-if-width-less-530 {
+    display: none;
+  }
+  .sneat-smaller-if-width-less-530 {
+    font-size: smaller;
+  }
+  .sneat-small-if-width-less-530 {
+    font-size: small;
+  }
+}
+
+@media screen and (max-width: 420px) {
+  .sneat-hide-if-width-less-420 {
+    display: none;
+  }
+  .sneat-smaller-if-width-less-420 {
+    font-size: smaller;
+  }
+  .sneat-small-if-width-less-420 {
+    font-size: small;
+  }
+}
+
+@media screen and (min-width: 321px) {
+  .sneat-hide-if-width-greater-320 {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .sneat-hide-if-width-less-320 {
+    display: none;
+  }
+  .sneat-smaller-if-width-less-320 {
+    font-size: smaller;
+  }
+  .sneat-small-if-width-less-320 {
+    font-size: small;
+  }
+}
+
+@media screen and (max-width: 240px) {
+  .sneat-hide-if-width-less-240 {
+    display: none;
+  }
+  .sneat-smaller-if-width-less-240 {
+    font-size: smaller;
+  }
+  .sneat-small-if-width-less-240 {
+    font-size: small;
+  }
+}
+
+ion-popover {
+  --min-width: 350px; // 350px is <ion-datetime> width TODO: This sucks!!!
+}
+
+ion-item.ion-item-no-border {
+  --inner-border-width: 0;
+  --border-width: 0;
+}
+
+.sneat-label-color-medium .label-text {
+  //color: #92949c;
+  color: var(--ion-color-medium);
+}
+
+.ion-input.sneat-input-padding-top {
+  padding-top: 10px;
+}
+
+.canceled {
+  text-decoration: line-through;
+}
+
+.deleting-list-item {
+  text-decoration: line-through;
+}
+
+.no-border-for-last-child {
+  :last-child {
+    --border-style: none !important;
+  }
+}
+
+.sneat-badges {
+  ion-badge {
+    font-weight: normal;
+    margin-left: 0.25em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}

package/src/test-setup.ts

@@ -0,0 +1,3 @@
+import { setupTestEnvironment } from '@sneat/core/testing';
+
+setupTestEnvironment();

package/src/theme/variables.scss

@@ -0,0 +1,235 @@
+// Ionic Variables and Theming. For more info, please see:
+// http://ionicframework.com/docs/theming/
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+//@media (prefers-color-scheme: dark) {
+//	/*
+//   * Dark Colors
+//   * -------------------------------------------
+//   */
+//
+//	body {
+//		--ion-color-primary: #428cff;
+//		--ion-color-primary-rgb: 66, 140, 255;
+//		--ion-color-primary-contrast: #ffffff;
+//		--ion-color-primary-contrast-rgb: 255, 255, 255;
+//		--ion-color-primary-shade: #3a7be0;
+//		--ion-color-primary-tint: #5598ff;
+//
+//		--ion-color-secondary: #50c8ff;
+//		--ion-color-secondary-rgb: 80, 200, 255;
+//		--ion-color-secondary-contrast: #ffffff;
+//		--ion-color-secondary-contrast-rgb: 255, 255, 255;
+//		--ion-color-secondary-shade: #46b0e0;
+//		--ion-color-secondary-tint: #62ceff;
+//
+//		--ion-color-tertiary: #6a64ff;
+//		--ion-color-tertiary-rgb: 106, 100, 255;
+//		--ion-color-tertiary-contrast: #ffffff;
+//		--ion-color-tertiary-contrast-rgb: 255, 255, 255;
+//		--ion-color-tertiary-shade: #5d58e0;
+//		--ion-color-tertiary-tint: #7974ff;
+//
+//		--ion-color-success: #2fdf75;
+//		--ion-color-success-rgb: 47, 223, 117;
+//		--ion-color-success-contrast: #000000;
+//		--ion-color-success-contrast-rgb: 0, 0, 0;
+//		--ion-color-success-shade: #29c467;
+//		--ion-color-success-tint: #44e283;
+//
+//		--ion-color-warning: #ffd534;
+//		--ion-color-warning-rgb: 255, 213, 52;
+//		--ion-color-warning-contrast: #000000;
+//		--ion-color-warning-contrast-rgb: 0, 0, 0;
+//		--ion-color-warning-shade: #e0bb2e;
+//		--ion-color-warning-tint: #ffd948;
+//
+//		--ion-color-danger: #ff4961;
+//		--ion-color-danger-rgb: 255, 73, 97;
+//		--ion-color-danger-contrast: #ffffff;
+//		--ion-color-danger-contrast-rgb: 255, 255, 255;
+//		--ion-color-danger-shade: #e04055;
+//		--ion-color-danger-tint: #ff5b71;
+//
+//		--ion-color-dark: #f4f5f8;
+//		--ion-color-dark-rgb: 244, 245, 248;
+//		--ion-color-dark-contrast: #000000;
+//		--ion-color-dark-contrast-rgb: 0, 0, 0;
+//		--ion-color-dark-shade: #d7d8da;
+//		--ion-color-dark-tint: #f5f6f9;
+//
+//		--ion-color-medium: #989aa2;
+//		--ion-color-medium-rgb: 152, 154, 162;
+//		--ion-color-medium-contrast: #000000;
+//		--ion-color-medium-contrast-rgb: 0, 0, 0;
+//		--ion-color-medium-shade: #86888f;
+//		--ion-color-medium-tint: #a2a4ab;
+//
+//		--ion-color-light: #222428;
+//		--ion-color-light-rgb: 34, 36, 40;
+//		--ion-color-light-contrast: #ffffff;
+//		--ion-color-light-contrast-rgb: 255, 255, 255;
+//		--ion-color-light-shade: #1e2023;
+//		--ion-color-light-tint: #383a3e;
+//	}
+//
+//	/*
+//   * iOS Dark Theme
+//   * -------------------------------------------
+//   */
+//
+//	.ios body {
+//		--ion-background-color: #000000;
+//		--ion-background-color-rgb: 0, 0, 0;
+//
+//		--ion-text-color: #ffffff;
+//		--ion-text-color-rgb: 255, 255, 255;
+//
+//		--ion-color-step-50: #0d0d0d;
+//		--ion-color-step-100: #1a1a1a;
+//		--ion-color-step-150: #262626;
+//		--ion-color-step-200: #333333;
+//		--ion-color-step-250: #404040;
+//		--ion-color-step-300: #4d4d4d;
+//		--ion-color-step-350: #595959;
+//		--ion-color-step-400: #666666;
+//		--ion-color-step-450: #737373;
+//		--ion-color-step-500: #808080;
+//		--ion-color-step-550: #8c8c8c;
+//		--ion-color-step-600: #999999;
+//		--ion-color-step-650: #a6a6a6;
+//		--ion-color-step-700: #b3b3b3;
+//		--ion-color-step-750: #bfbfbf;
+//		--ion-color-step-800: #cccccc;
+//		--ion-color-step-850: #d9d9d9;
+//		--ion-color-step-900: #e6e6e6;
+//		--ion-color-step-950: #f2f2f2;
+//
+//		--ion-item-background: #000000;
+//
+//		--ion-card-background: #1c1c1d;
+//	}
+//
+//	.ios ion-modal {
+//		--ion-background-color: var(--ion-color-step-100);
+//		--ion-toolbar-background: var(--ion-color-step-150);
+//		--ion-toolbar-border-color: var(--ion-color-step-250);
+//	}
+//
+//	/*
+//   * Material Design Dark Theme
+//   * -------------------------------------------
+//   */
+//
+//	.md body {
+//		--ion-background-color: #121212;
+//		--ion-background-color-rgb: 18, 18, 18;
+//
+//		--ion-text-color: #ffffff;
+//		--ion-text-color-rgb: 255, 255, 255;
+//
+//		--ion-border-color: #222222;
+//
+//		--ion-color-step-50: #1e1e1e;
+//		--ion-color-step-100: #2a2a2a;
+//		--ion-color-step-150: #363636;
+//		--ion-color-step-200: #414141;
+//		--ion-color-step-250: #4d4d4d;
+//		--ion-color-step-300: #595959;
+//		--ion-color-step-350: #656565;
+//		--ion-color-step-400: #717171;
+//		--ion-color-step-450: #7d7d7d;
+//		--ion-color-step-500: #898989;
+//		--ion-color-step-550: #949494;
+//		--ion-color-step-600: #a0a0a0;
+//		--ion-color-step-650: #acacac;
+//		--ion-color-step-700: #b8b8b8;
+//		--ion-color-step-750: #c4c4c4;
+//		--ion-color-step-800: #d0d0d0;
+//		--ion-color-step-850: #dbdbdb;
+//		--ion-color-step-900: #e7e7e7;
+//		--ion-color-step-950: #f3f3f3;
+//
+//		--ion-item-background: #1e1e1e;
+//
+//		--ion-toolbar-background: #1f1f1f;
+//
+//		--ion-tab-bar-background: #1f1f1f;
+//
+//		--ion-card-background: #1e1e1e;
+//	}
+//}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.angular.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.lib.base.json",
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/test-setup.ts",
+    "src/lib/testing/**/*"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {}
+}

package/tsconfig.spec.json

@@ -0,0 +1,31 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "files": [
+    "src/test-setup.ts"
+  ]
+}

package/vite.config.mts

@@ -0,0 +1,10 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vitest/config';
+import { createBaseViteConfig } from '../../vite.config.base';
+
+export default defineConfig(() =>
+	createBaseViteConfig({
+		dirname: __dirname,
+		name: 'components',
+	}),
+);