@mxtommy/kip 3.12.0 → 4.0.2

package/public/styles-MJ4EO4B4.css

@@ -0,0 +1 @@
+@font-face{font-family:Material Icons;font-style:normal;font-weight:400;font-display:swap;src:local("Material Icons"),local("MaterialIcons-Regular"),url("./media/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ-CN2J7AYH.woff2") format("woff2")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url("./media/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP-QPSNQEDD.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url("./media/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP-XWLWMQVU.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url("./media/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP-32PLHKPQ.woff2") format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url("./media/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP-ITB7NUJC.woff2") format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url("./media/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP-OG5AHRIX.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url("./media/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP-JKBSJZY3.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url("./media/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ-PWGJWDFE.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url("./media/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz-PRJ7OQMU.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url("./media/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz-DRL4U32S.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url("./media/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz-Z72STTMG.woff2") format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url("./media/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz-PPTELUJT.woff2") format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url("./media/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz-KZD6JQRT.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url("./media/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz-HW6RMPJ3.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url("./media/KFOmCnqEu92Fr1Mu4mxKKTU1Kg-SNGEW7FX.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("./media/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP-36ULTGLY.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("./media/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP-ILKS6RVC.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("./media/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP-U3JTBV4H.woff2") format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("./media/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP-UW3XWY7P.woff2") format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("./media/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP-2EL65J2O.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("./media/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP-5NJLO2HW.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("./media/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ-MJ3CERJ6.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.rounded-card-color{background-color:var(--kip-contrast-dimmer-color)}.rounded-card{margin-top:10px;border-radius:15px;padding:10px}.formActionFooter{width:100%;text-align:end;margin-top:10px}.formActionButton{margin:0 3px 10px 10px}.formActionDivider{padding-bottom:10px}.flex-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;align-content:flex-start;gap:10px}.flex-item-rounded-card{flex:1 1 29%;padding:10px 20px;border-radius:15px}.flex-checkbox-30{flex-grow:1;flex-basis:30%;padding-bottom:23px}.flex-field-30{flex-grow:1;flex-basis:30%}.flex-field-50{flex-grow:1;flex-basis:48%}.flex-field-65{flex-grow:1;flex-basis:65%}.flex-field-100{flex-grow:1;flex-basis:100%}.flex-field-to-100{flex-grow:1;flex-basis:60%}.flex-field-fixed{flex-grow:0;flex-shrink:0;flex-basis:auto}.filter-path{width:125px}.mat-mdc-radio-button~.mat-radio-button{margin-left:16px}.widget-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.options-grid-span2{grid-column:1/span 2}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin-left:16px}.full-width{width:100%}.page-content-wrapper{padding:0 24px 14px}.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;left:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}:root{--mat-sys-background: #191c1d;--kip-nightModeBrightness: 1;--kip-widget-card-background-color: #000000;--kip-widget-card-border-color: #252525;--kip-widget-card-border-style: solid;--kip-widget-card-border-width: 2px;--kip-blue-color: #3298ff;--kip-blue-dim-color: rgba(53, 154, 255, .7764705882);--kip-blue-dimmer-color: rgba(6, 59, 113, .4705882353);--kip-green-color: #00d000;--kip-green-dim-color: rgba(0, 208, 0, .7137254902);--kip-green-dimmer-color: rgba(0, 104, 0, .4705882353);--kip-purple-color: #A020F0;--kip-purple-dim-color: rgba(160, 32, 240, .7137254902);--kip-purple-dimmer-color: rgba(74, 15, 110, .4705882353);--kip-yellow-color: #ffdf00;--kip-yellow-dim-color: rgba(255, 223, 0, .7137254902);--kip-yellow-dimmer-color: rgba(114, 110, 0, .4705882353);--kip-pink-color: #FC0FC0;--kip-pink-dim-color: rgba(252, 15, 192, .7137254902);--kip-pink-dimmer-color: rgba(109, 7, 83, .4705882353);--kip-orange-color: #ff9100;--kip-orange-dim-color: rgba(255, 145, 0, .7137254902);--kip-orange-dimmer-color: rgba(113, 74, 0, .4705882353);--kip-contrast-color: #FFFFFF;--kip-contrast-dim-color: rgba(255, 255, 255, .7137254902);--kip-contrast-dimmer-color: rgba(255, 255, 255, .1607843137);--kip-grey-color: #B5B5B5;--kip-grey-dim-color: rgba(181, 181, 181, .7137254902);--kip-grey-dimmer-color: #1a1a1a;--kip-port-color: #8F0000;--kip-starboard-color: #008700;--kip-zone-nominal-color: #0164FA;--kip-zone-alert-color: #ffff60;--kip-zone-warn-color: #ff8d41;--kip-zone-alarm-color: #E90000;--kip-zone-emergency-color: #760000}body.light-theme{--mat-sys-background: #e1e4ec;--kip-widget-card-background-color: #ffffff;--kip-widget-card-border-color: #252525;--kip-contrast-color: #000000;--kip-contrast-dim-color: rgba(0, 0, 0, .7137254902);--kip-contrast-dimmer-color: rgba(0, 0, 0, .1607843137);--kip-grey-color: #666666;--kip-grey-dim-color: rgba(102, 102, 102, .7137254902);--kip-grey-dimmer-color: rgba(102, 102, 102, .1607843137);--kip-blue-color: #005bb5;--kip-blue-dim-color: rgba(0, 91, 181, .7137254902);--kip-blue-dimmer-color: rgba(0, 91, 181, .4705882353);--kip-green-color: #007a00;--kip-green-dim-color: rgba(0, 122, 0, .7137254902);--kip-green-dimmer-color: rgba(0, 122, 0, .4705882353);--kip-purple-color: #6a00a8;--kip-purple-dim-color: rgba(106, 0, 168, .7137254902);--kip-purple-dimmer-color: rgba(106, 0, 168, .4705882353);--kip-yellow-color: #bfa800;--kip-yellow-dim-color: rgba(191, 168, 0, .7137254902);--kip-yellow-dimmer-color: rgba(191, 168, 0, .4705882353);--kip-pink-color: #b00070;--kip-pink-dim-color: rgba(176, 0, 112, .7137254902);--kip-pink-dimmer-color: rgba(176, 0, 112, .4705882353);--kip-orange-color: #c56200;--kip-orange-dim-color: rgba(197, 98, 0, .7137254902);--kip-orange-dimmer-color: rgba(197, 98, 0, .4705882353);--kip-port-color: #b70000;--kip-starboard-color: #008700;--kip-zone-nominal-color: #0182fa;--kip-zone-alert-color: #f0f032;--kip-zone-warn-color: #ff8534;--kip-zone-alarm-color: #ff0000;--kip-zone-emergency-color: #741e1e}body.night-theme{--mat-sys-background: #101415;--kip-widget-card-background-color: #000000;--kip-widget-card-border-color: #252525;--kip-contrast-color: #520000;--kip-contrast-dim-color: rgba(82, 0, 0, .7137254902);--kip-contrast-dimmer-color: rgba(38, 0, 0, .7725490196);--kip-grey-color: #520000;--kip-grey-dim-color: rgba(82, 0, 0, .7137254902);--kip-grey-dimmer-color: rgba(38, 0, 0, .7725490196);--kip-blue-color: #520000;--kip-blue-dim-color: rgba(82, 0, 0, .7137254902);--kip-blue-dimmer-color: rgba(38, 0, 0, .7725490196);--kip-green-color: #520000;--kip-green-dim-color: rgba(82, 0, 0, .7137254902);--kip-green-dimmer-color: rgba(38, 0, 0, .7725490196);--kip-purple-color: #520000;--kip-purple-dim-color: rgba(82, 0, 0, .7137254902);--kip-purple-dimmer-color: rgba(38, 0, 0, .7725490196);--kip-yellow-color: #520000;--kip-yellow-dim-color: rgba(82, 0, 0, .7137254902);--kip-yellow-dimmer-color: rgba(38, 0, 0, .7725490196);--kip-pink-color: #520000;--kip-pink-dim-color: rgba(82, 0, 0, .7137254902);--kip-pink-dimmer-color: rgba(38, 0, 0, .7725490196);--kip-orange-color: #520000;--kip-orange-dim-color: rgba(82, 0, 0, .7137254902);--kip-orange-dimmer-color: rgba(38, 0, 0, .7725490196);--kip-port-color: #800000;--kip-starboard-color: #005500;--kip-zone-nominal-color: #001d49;--kip-zone-alert-color: #2c2c00;--kip-zone-warn-color: #441e00;--kip-zone-alarm-color: #850000;--kip-zone-emergency-color: #bd0000}html{--mat-sys-background: #101415;--mat-sys-error: #ffb4ab;--mat-sys-error-container: #93000a;--mat-sys-inverse-on-surface: #2e3132;--mat-sys-inverse-primary: #0058c9;--mat-sys-inverse-surface: #e1e3e3;--mat-sys-on-background: #e1e3e3;--mat-sys-on-error: #690005;--mat-sys-on-error-container: #ffdad6;--mat-sys-on-primary: #002d6d;--mat-sys-on-primary-container: #d9e2ff;--mat-sys-on-primary-fixed: #001944;--mat-sys-on-primary-fixed-variant: #00429a;--mat-sys-on-secondary: #002e6b;--mat-sys-on-secondary-container: #d8e2ff;--mat-sys-on-secondary-fixed: #001a42;--mat-sys-on-secondary-fixed-variant: #13448f;--mat-sys-on-surface: #e1e3e3;--mat-sys-on-surface-variant: #dbe4e6;--mat-sys-on-tertiary: #3d2f00;--mat-sys-on-tertiary-container: #ffe08b;--mat-sys-on-tertiary-fixed: #241a00;--mat-sys-on-tertiary-fixed-variant: #584400;--mat-sys-outline: #899294;--mat-sys-outline-variant: #3f484a;--mat-sys-primary: #afc6ff;--mat-sys-primary-container: #00429a;--mat-sys-primary-fixed: #d9e2ff;--mat-sys-primary-fixed-dim: #afc6ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #aec6ff;--mat-sys-secondary-container: #13448f;--mat-sys-secondary-fixed: #d8e2ff;--mat-sys-secondary-fixed-dim: #aec6ff;--mat-sys-shadow: #000000;--mat-sys-surface: #101415;--mat-sys-surface-bright: #363a3a;--mat-sys-surface-container: #1d2021;--mat-sys-surface-container-high: #272b2b;--mat-sys-surface-container-highest: #323536;--mat-sys-surface-container-low: #191c1d;--mat-sys-surface-container-lowest: #0b0f0f;--mat-sys-surface-dim: #101415;--mat-sys-surface-tint: #afc6ff;--mat-sys-surface-variant: #3f484a;--mat-sys-tertiary: #eec12c;--mat-sys-tertiary-container: #584400;--mat-sys-tertiary-fixed: #ffe08b;--mat-sys-tertiary-fixed-dim: #eec12c;--mat-sys-neutral-variant20: #293234;--mat-sys-neutral10: #191c1d;--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: .031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 .875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: .875rem;--mat-sys-body-medium-tracking: .016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 .75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: .75rem;--mat-sys-body-small-tracking: .025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto;--mat-sys-display-large-font: Roboto;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;--mat-sys-display-medium-font: Roboto;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;--mat-sys-display-small-font: Roboto;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto;--mat-sys-headline-large-font: Roboto;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;--mat-sys-headline-medium-font: Roboto;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto;--mat-sys-headline-small-font: Roboto;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 .875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: .875rem;--mat-sys-label-large-tracking: .006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 .75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: .75rem;--mat-sys-label-medium-tracking: .031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 .688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: .688rem;--mat-sys-label-small-tracking: .031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;--mat-sys-title-large-font: Roboto;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: .009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 .875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: .875rem;--mat-sys-title-small-tracking: .006rem;--mat-sys-title-small-weight: 500;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12}.light-theme{--mat-sys-background: #fcf8fd;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #f3eff4;--mat-sys-inverse-primary: #bec2ff;--mat-sys-inverse-surface: #303034;--mat-sys-on-background: #1b1b1f;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #93000a;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #0000ef;--mat-sys-on-primary-fixed: #00006e;--mat-sys-on-primary-fixed-variant: #0000ef;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #444559;--mat-sys-on-secondary-fixed: #191a2c;--mat-sys-on-secondary-fixed-variant: #444559;--mat-sys-on-surface: #1b1b1f;--mat-sys-on-surface-variant: #46464f;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #494900;--mat-sys-on-tertiary-fixed: #1d1d00;--mat-sys-on-tertiary-fixed-variant: #494900;--mat-sys-outline: #777680;--mat-sys-outline-variant: #c7c5d0;--mat-sys-primary: #343dff;--mat-sys-primary-container: #e0e0ff;--mat-sys-primary-fixed: #e0e0ff;--mat-sys-primary-fixed-dim: #bec2ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #5c5d72;--mat-sys-secondary-container: #e1e0f9;--mat-sys-secondary-fixed: #e1e0f9;--mat-sys-secondary-fixed-dim: #c5c4dd;--mat-sys-shadow: #000000;--mat-sys-surface: #fcf8fd;--mat-sys-surface-bright: #fcf8fd;--mat-sys-surface-container: #f0edf1;--mat-sys-surface-container-high: #ebe7eb;--mat-sys-surface-container-highest: #e5e1e6;--mat-sys-surface-container-low: #f6f2f7;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #dcd9dd;--mat-sys-surface-tint: #343dff;--mat-sys-surface-variant: #e4e1ec;--mat-sys-tertiary: #626200;--mat-sys-tertiary-container: #eaea00;--mat-sys-tertiary-fixed: #eaea00;--mat-sys-tertiary-fixed-dim: #cdcd00;--mat-sys-neutral-variant20: #303038;--mat-sys-neutral10: #1b1b1f;--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: .031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 .875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: .875rem;--mat-sys-body-medium-tracking: .016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 .75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: .75rem;--mat-sys-body-small-tracking: .025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto;--mat-sys-display-large-font: Roboto;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;--mat-sys-display-medium-font: Roboto;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;--mat-sys-display-small-font: Roboto;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto;--mat-sys-headline-large-font: Roboto;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;--mat-sys-headline-medium-font: Roboto;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto;--mat-sys-headline-small-font: Roboto;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 .875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: .875rem;--mat-sys-label-large-tracking: .006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 .75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: .75rem;--mat-sys-label-medium-tracking: .031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 .688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: .688rem;--mat-sys-label-small-tracking: .031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;--mat-sys-title-large-font: Roboto;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: .009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 .875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: .875rem;--mat-sys-title-small-tracking: .006rem;--mat-sys-title-small-weight: 500;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12}.night-theme{--mat-sys-background: #1b110f;--mat-sys-error: #ffb4ab;--mat-sys-error-container: #93000a;--mat-sys-inverse-on-surface: #3a2e2c;--mat-sys-inverse-primary: #a33c2e;--mat-sys-inverse-surface: #f3dedb;--mat-sys-on-background: #f3dedb;--mat-sys-on-error: #690005;--mat-sys-on-error-container: #ffdad6;--mat-sys-on-primary: #640d06;--mat-sys-on-primary-container: #ffdad4;--mat-sys-on-primary-fixed: #410000;--mat-sys-on-primary-fixed-variant: #83251a;--mat-sys-on-secondary: #640d06;--mat-sys-on-secondary-container: #ffdad4;--mat-sys-on-secondary-fixed: #410000;--mat-sys-on-secondary-fixed-variant: #83251a;--mat-sys-on-surface: #f3dedb;--mat-sys-on-surface-variant: #fbdcd7;--mat-sys-on-tertiary: #640d06;--mat-sys-on-tertiary-container: #ffdad4;--mat-sys-on-tertiary-fixed: #410000;--mat-sys-on-tertiary-fixed-variant: #83251a;--mat-sys-outline: #a58b86;--mat-sys-outline-variant: #57423e;--mat-sys-primary: #ffb4a8;--mat-sys-primary-container: #83251a;--mat-sys-primary-fixed: #ffdad4;--mat-sys-primary-fixed-dim: #ffb4a8;--mat-sys-scrim: #000000;--mat-sys-secondary: #ffb4a8;--mat-sys-secondary-container: #83251a;--mat-sys-secondary-fixed: #ffdad4;--mat-sys-secondary-fixed-dim: #ffb4a8;--mat-sys-shadow: #000000;--mat-sys-surface: #1b110f;--mat-sys-surface-bright: #433634;--mat-sys-surface-container: #281d1b;--mat-sys-surface-container-high: #332725;--mat-sys-surface-container-highest: #3e3230;--mat-sys-surface-container-low: #241917;--mat-sys-surface-container-lowest: #150c0a;--mat-sys-surface-dim: #1b110f;--mat-sys-surface-tint: #ffb4a8;--mat-sys-surface-variant: #57423e;--mat-sys-tertiary: #ffb4a8;--mat-sys-tertiary-container: #83251a;--mat-sys-tertiary-fixed: #ffdad4;--mat-sys-tertiary-fixed-dim: #ffb4a8;--mat-sys-neutral-variant20: #3f2c29;--mat-sys-neutral10: #241917;--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: .031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 .875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: .875rem;--mat-sys-body-medium-tracking: .016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 .75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: .75rem;--mat-sys-body-small-tracking: .025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto;--mat-sys-display-large-font: Roboto;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;--mat-sys-display-medium-font: Roboto;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;--mat-sys-display-small-font: Roboto;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto;--mat-sys-headline-large-font: Roboto;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;--mat-sys-headline-medium-font: Roboto;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto;--mat-sys-headline-small-font: Roboto;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 .875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: .875rem;--mat-sys-label-large-tracking: .006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 .75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: .75rem;--mat-sys-label-medium-tracking: .031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 .688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: .688rem;--mat-sys-label-small-tracking: .031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;--mat-sys-title-large-font: Roboto;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: .009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 .875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: .875rem;--mat-sys-title-small-tracking: .006rem;--mat-sys-title-small-weight: 500;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-container-color: var(--kip-contrast-dim-color);--mat-button-outlined-outline-color: var(--kip-contrast-color);--mat-icon-color: var(--kip-contrast-color);--mat-sys-on-background: #831d1d;--mat-sys-on-surface: #831d1d;--mat-sys-on-surface-variant: #831d1d;--mat-sys-inverse-surface: #831d1d;--mat-sys-primary: #831d1d;--mat-sys-outline: #831d1d;--mat-sys-tertiary-fixed: var(--kip-contrast-color);--mat-sys-tertiary-fixed-dim: var(--kip-contrast-color)}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{height:100%;overscroll-behavior-y:none;user-select:none;-webkit-user-select:none;-ms-user-select:none;overflow-x:hidden}input,textarea,[contenteditable=true]{user-select:text;-webkit-user-select:text;margin:0;overscroll-behavior-y:none}.app-shell{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}body{font-family:Roboto,Helvetica Neue,sans-serif;background:var(--mat-sys-surface);color:var(--mat-sys-on-surface);margin:0;touch-action:none}#app-filter-wrapper{filter:brightness(var(--kip-nightModeBrightness)) var(--kip-nightModeFilters);-webkit-backdrop-filter:brightness(var(--kip-nightModeBrightness));backdrop-filter:brightness(var(--kip-nightModeBrightness));transition:filter .3s ease;position:relative;z-index:1300}.dialogBackdrop{background-color:#000000bf}.ng-invalid:not(form){border-left:5px solid var(--kip-zone-alarm-color)}.ng-valid[required],.ng-valid.required{border-left:5px solid var(--kip-green-color)}.grid-stack .ui-resizable-se,.grid-stack .ui-resizable-sw,.grid-stack .ui-resizable-ne,.grid-stack .ui-resizable-nw{width:32px;height:32px}.grid-stack .ui-resizable-e,.grid-stack .ui-resizable-w{width:32px}.grid-stack .ui-resizable-n,.grid-stack .ui-resizable-s{height:32px}.loader-container{height:100%;width:100%;background-color:var(--mat-sys-background);display:flex;align-items:center;justify-content:center}#loader{height:175px;width:175px;position:relative}#loader .dot{height:100%;inset:0;margin:auto;position:absolute;width:87.5px}#loader .dot:before{border-radius:100%;content:"";height:87.5px;left:0;position:absolute;right:0;top:0;transform:scale(0);width:87.5px}#loader .dot:nth-child(7n+1){transform:rotate(45deg)}#loader .dot:nth-child(7n+1):before{animation:.8s linear .1s normal none infinite running load;background:#e5ab13 none repeat scroll 0 0}.notification-overlay-panel{position:fixed;bottom:20px;left:20px;z-index:1100!important;pointer-events:auto}.cdk-overlay-container .cdk-overlay-pane.notification-overlay-panel{z-index:1100!important}#loader .dot:nth-child(7n+2){transform:rotate(90deg)}#loader .dot:nth-child(7n+2):before{animation:.8s linear .2s normal none infinite running load;background:#f0ca31 none repeat scroll 0 0}#loader .dot:nth-child(7n+3){transform:rotate(135deg)}#loader .dot:nth-child(7n+3):before{animation:.8s linear .3s normal none infinite running load;background:#92c7e9 none repeat scroll 0 0}#loader .dot:nth-child(7n+4){transform:rotate(180deg)}#loader .dot:nth-child(7n+4):before{animation:.8s linear .4s normal none infinite running load;background:#63afdf none repeat scroll 0 0}#loader .dot:nth-child(7n+5){transform:rotate(225deg)}#loader .dot:nth-child(7n+5):before{animation:.8s linear .5s normal none infinite running load;background:#3586ca none repeat scroll 0 0}#loader .dot:nth-child(7n+6){transform:rotate(270deg)}#loader .dot:nth-child(7n+6):before{animation:.8s linear .6s normal none infinite running load;background:#d52626 none repeat scroll 0 0}#loader .dot:nth-child(7n+7){transform:rotate(315deg)}#loader .dot:nth-child(7n+7):before{animation:.8s linear .7s normal none infinite running load;background:#e26767 none repeat scroll 0 0}#loader .dot:nth-child(7n+8){transform:rotate(360deg)}#loader .dot:nth-child(7n+8):before{animation:.8s linear .8s normal none infinite running load;background:#f8e598 none repeat scroll 0 0}#loader .loading{background-position:50% 50%;background-repeat:no-repeat;bottom:-40px;height:20px;left:0;position:absolute;right:0;width:180px}@keyframes load{to{opacity:0;transform:scale(1)}}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

package/tools/schematics/collection.json

@@ -0,0 +1,9 @@
+{
+  "schematics": {
+    "create-host2-widget": {
+      "description": "Generate a Host2 KIP widget (component + optional config + service wiring)",
+      "factory": "./create-host2-widget/index#createHost2Widget",
+      "schema": "./create-host2-widget/schema.json"
+    }
+  }
+}

package/tools/schematics/create-host2-widget/files/readme/README.md.template

@@ -0,0 +1,109 @@
+# <%= title %> Widget
+
+Generated by KIP create-host2-widget schematic.
+
+Selector: `<%= selector %>`
+
+## Default Config
+```ts
+<%= className %>.DEFAULT_CONFIG
+```
+
+## Path(s)
+Primary path key: `signalKPath` (<%= pathType %>) unit: `<%= convertUnitTo %>` sampleTime: <%= sampleTime %>ms
+
+<% if (zonesSupport) { %>
+## Zones Support
+This widget was generated with Zones support enabled. Zones scaffolding includes two integration points:
+
+### Zones definitions
+- `WidgetMetadataDirective` is imported and injected.
+- A `this.metadata.zones()` signal placeholder is included to surface zones metadata information.
+- A `highlights` computed signal that generates KIP widget compatible zones array is included. Modify to your needs.
+- metadata.observe('signalKPath') call is added automating zone monitoring for the configured path.
+- Remove or adapt these parts if your widget will not visualize Signal K Zones.
+
+### Path Data State
+The path data may also include a state (zone classification) emitted by the server. That state corresponds to the zone whose range the value falls into. This state is sent whether or not the widget enables zones metadata support. See `path.data.state` in the observed path payload.
+<% } %>
+
+## Core Concepts
+This widget follows the Host2 architecture. The runtime merges persisted config
+(Signal K server or local storage) with `DEFAULT_CONFIG` and feeds it through the
+injected directives. All you need to do is set the DEFAULT_CONFIG and the directive
+will handle merging and persisting user settings automatically.
+
+### Adding More Paths
+Add additional keys under `DEFAULT_CONFIG.paths` (each must include `pathType` and
+typical options). Then register observers within the second `effect()` in the
+component (group them in a single `untracked` block for performance).
+
+### Optional vs Required Paths
+Mark non-critical (optional) paths with `pathRequired: false` to allow empty configuration
+without errors. Always guard before observing.
+
+### Units & Conversion
+Specify `convertUnitTo` for number paths in `DEFAULT_CONFIG` to let KIP auto-convert
+via `UnitsService`. Do not manually convert unless you have a special case.
+UnitsService supports most formatting and conversions. If one is missing, add the
+unit to the service instead of hardcoding conversion math in a widget.
+
+## Available Angular Services (Commonly Injected)
+| Service | Purpose | Typical Use |
+|---------|---------|-------------|
+| `UnitsService` | Central unit conversion & formatting | Convert or format values when you must post-process derived numbers. |
+| `DataSetService` | Historical / trend datasets (chart widgets) | Create/update/remove datasets for charts or statistics. |
+| `NotificationsService` | User-visible toast/Snackbar/info/warn/error | Present message to user |
+| `SignalKRequestsService` | PUT/Request operations to server | Implement interactive controls and set Signal K path value (e.g., set heading). |
+| `DataService` | Low-level Signal K value + metadata access | Rarely needed directly; `WidgetStreamsDirective` wraps it. |
+| `CanvasService` | High-DPI sizing, font readiness, offscreen/static layer caching, draw helpers | Register & auto-resize canvases, cache static bitmaps (titles/backgrounds), release GPU memory on destroy. |
+
+
+Inject with Angular `inject(ServiceClass)` or constructor injection (signals style recommended in Host2 files).
+
+## Directives Supplied to Widgets
+| Directive | Role |
+|-----------|------|
+| `WidgetRuntimeDirective` | Provides merged config (`options()`), id, sizing. |
+| `WidgetStreamsDirective` | Observe path data streams with sampling, unit conversion, timeout logic. |
+| `WidgetMetadataDirective` | Access zones / metadata (call `observe` for updates, `zones()` for current list). |
+
+## Useful Utility Functions
+| Utility | Source | Purpose |
+|---------|--------|---------|
+| `getColors(themeKey, theme)` | `core/utils/themeColors.utils` | Returns palette variants (normal/dim/bright) for configured color key. |
+| `svg-animate.util` helpers | `widgets/utils/svg-animate.util` | Smooth rAF animations (rotation, angle transitions, sectors). |
+| `zones-highlight.utils` | `core/utils/zones-highlight.utils` | Build highlight arrays for gauge / chart overlays from zones metadata. |
+
+## Integrating Zones (If Enabled)
+When zones support is active, metadata-driven highlights can be computed and surfaced to the template. Use colors derived from the active theme for contrast and accessibility. Keep highlight computation outside change detection hot paths (use signals/computed as shown).
+
+## Performance Tips
+1. Batch all `streams.observe` calls in one `untracked` block inside a single `effect`.
+2. Store transient UI state in signals, never mutate the merged config object.
+3. Use SVG animation helpers for high-frequency visual updates; they run outside Angular via `NgZone`.
+4. Keep sample times reasonable (>= 250ms) to avoid widget churn.
+
+## Error / Edge Handling
+| Scenario | Recommendation |
+|----------|---------------|
+| Missing path | Guard before observing; show placeholder or dim widget. |
+| Stale data (timeout) | Enable `enableTimeout` and set `dataTimeout` seconds in config. UI can style on timeout state. |
+| Unit mismatch | Rely on `convertUnitTo`; avoid manual conversions. |
+| Zones absent | Treat highlights array as empty; avoid errors by null-guarding metadata. |
+
+## Icon & Description
+Update the icon and description in the `widget.service.ts` entry inserted by the schematic. Replace `placeholder-icon` and the long TODO description. Ensure the SVG symbol id exists in `src/assets/svg/icons.svg` or add a new symbol there.
+
+## Testing
+If `--add-spec` was used, a basic spec file is generated. Extend tests to:
+1. Mock `WidgetStreamsDirective` emissions to verify signal updates.
+2. Validate conditional rendering with and without path values.
+3. (Optional) Provide fake zones metadata to exercise highlight logic.
+
+## Deployment Checklist
+- [ ] Replace placeholder icon & description
+- [ ] Adjust DEFAULT_CONFIG displayName
+- [ ] Remove unused TODO comments
+- [ ] Remove all console.log() calls
+- [ ] Add tests for edge cases (timeouts, no path, zones absent)

package/tools/schematics/create-host2-widget/files/spec/widget-__name@dasherize__.component.spec.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { signal } from '@angular/core';
+import { <%= className %> } from './<%= selector %>.component';
+import { WidgetRuntimeDirective } from '../../core/directives/widget-runtime.directive';
+import { WidgetStreamsDirective } from '../../core/directives/widget-streams.directive';
+import { WidgetMetadataDirective } from '../../core/directives/widget-metadata.directive';
+
+@Component({
+  template: `<%= '<' + selector %> [id]="id()" [type]="type()" [theme]="theme()" />`,
+  imports: [<%= className %>, WidgetRuntimeDirective, WidgetStreamsDirective, WidgetMetadataDirective]
+})
+class HostTestComponent {
+  id = signal('test-id');
+  type = signal('<%= selector %>');
+  theme = signal<null>(null);
+}
+
+describe('<%= className %> (Host2)', () => {
+  let fixture: ComponentFixture<HostTestComponent>;
+  let host: HostTestComponent;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HostTestComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HostTestComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(host).toBeTruthy();
+  });
+});

package/tools/schematics/create-host2-widget/files/widget/widget-__name@dasherize__.component.html

@@ -0,0 +1,6 @@
+<widget-title [text]="runtime.options().displayName" [color]="titleColor()"/>
+<p style="display: block; position: absolute; z-index: 20;
+    left: 0; right: 0;
+    top: 15%;
+    height: 85%;
+    width: 100%;">Path Value: {{ pathValue() }}</p>

package/tools/schematics/create-host2-widget/files/widget/widget-__name@dasherize__.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/tools/schematics/create-host2-widget/files/widget/widget-__name@dasherize__.component.ts.template

@@ -0,0 +1,94 @@
+<%# keep ejs tags intact %>
+import { AfterViewInit, Component, effect, inject, input, signal, untracked<% if (zonesSupport) { %>, computed<% } %> } from '@angular/core';
+import { IWidgetSvcConfig<% if (zonesSupport) { %>, IDataHighlight<% } %> } from '../../core/interfaces/widgets-interface';
+import { WidgetRuntimeDirective } from '../../core/directives/widget-runtime.directive';
+import { WidgetStreamsDirective } from '../../core/directives/widget-streams.directive';<% if (zonesSupport) { %>
+import { WidgetMetadataDirective } from '../../core/directives/widget-metadata.directive';
+import { getHighlights } from '../../core/utils/zones-highlight.utils';
+import { UnitsService } from '../../core/services/units.service';<% } %>
+import { ITheme } from '../../core/services/app-service';
+import { getColors } from '../../core/utils/themeColors.utils';
+import { WidgetTitleComponent } from '../../core/components/widget-title/widget-title.component';
+
+@Component({
+  selector: '<%= selector %>',
+  templateUrl: './<%= selector %>.component.html',
+  styleUrls: ['./<%= selector %>.component.scss'],
+  imports: [WidgetTitleComponent]
+})
+export class <%= className %> implements AfterViewInit {
+  public id = input.required<string>();
+  public type = input.required<string>();
+  public theme = input.required<ITheme | null>();
+  public static readonly DEFAULT_CONFIG: IWidgetSvcConfig = { <%= todoBlock ? "// TODO: Update default configuration values as required. See IWidgetSvcConfig interface for all options." : "" %>
+    displayName: "My New Widget Label",
+    color: "contrast",
+    paths: {
+      "signalKPath": {
+        description: "My new widget Options path description",
+        path: <%= pathDefault === null ? 'null' : `'${pathDefault}'` %>,
+        source: null,
+        pathType: '<%= pathType %>',
+        isPathConfigurable: true,
+        pathRequired: true,
+        convertUnitTo: null,
+        showPathSkUnitsFilter: false,
+        pathSkUnitsFilter: null,
+        sampleTime: 1000
+      }
+    },
+    filterSelfPaths: true,
+    enableTimeout: false,
+    dataTimeout: 5<% if (zonesSupport) { %>,
+    ignoreZones: false<%= todoBlock ? " // TODO: Signal K Zones support: delete if disabling zones should not be a widget Option users can configure." : "" %><% } %>
+  };
+
+  protected readonly runtime = inject(WidgetRuntimeDirective);
+  private readonly streams = inject(WidgetStreamsDirective);<% if (zonesSupport) { %>
+  private readonly metadata = inject(WidgetMetadataDirective);
+  private readonly unitsService = inject(UnitsService);<% } %>
+
+  protected titleColor = signal<string | undefined>(undefined);
+  protected pathValue = signal<number | null>(null);<% if (zonesSupport) { %>
+
+  protected highlights = computed<IDataHighlight[]>(() => {<%= todoBlock ? " // TODO: Signal K Zones support: Sample computed signal for zones highlights. Adjust depending on your widget needs." : "" %>
+    const zones = this.metadata.zones();
+    const cfg = this.runtime.options();
+    const theme = this.theme();
+
+    if (cfg?.ignoreZones || !zones?.length || !theme) return [];
+    const unit = cfg.paths['gaugePath'].convertUnitTo;
+    const min = cfg.displayScale.lower;
+    const max = cfg.displayScale.upper;
+    return getHighlights(zones, theme, unit, this.unitsService, min, max);
+  });<% } %>
+
+  constructor() {
+    effect(() => {
+      const theme = this.theme();
+      const cfg = this.runtime.options();
+      if (!theme || !cfg) return;
+
+      untracked(() => {
+        this.titleColor.set(getColors(this.runtime.options().color, theme).dim);<%= todoBlock ? " // TODO: Themes are either, Dark, Light or Red Night mode. Add signals to include more colors and variants in your template." : "" %>
+      });
+    });
+
+    effect(() => {<%= todoBlock ? " // React to widget Options configuration changes." : "" %>
+      const cfg = this.runtime.options();
+      untracked(() => {
+        const pathCfg = cfg.paths['signalKPath'];
+        if (pathCfg.path) {
+          this.streams.observe('signalKPath', path => {<%= todoBlock ? " // TODO: Update the signal with the latest path value and/or do more data processing as required." : "" %>
+            this.pathValue.set(path.data.value);
+          });<% if (zonesSupport) { %>
+          this.metadata.observe('signalKPath');<% } %>
+        }
+      });
+    });
+  }
+
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+  ngAfterViewInit() {<%= todoBlock ? " // TODO: Add additional widget logic here (canvas drawing, animations, etc.) here or remove if not needed." : "" %>
+  }
+}

package/tools/schematics/create-host2-widget/index.js

@@ -0,0 +1,138 @@
+const { apply, url, template, move, mergeWith, chain, noop } = require('@angular-devkit/schematics');
+const { strings } = require('@angular-devkit/core');
+const { appendImport, updateComponentMap, insertDefinitionObject } = require('./utils/formatting');
+
+const WIDGETS_DIR = 'src/app/widgets';
+const WIDGET_SERVICE = 'src/app/core/services/widget.service.ts';
+
+function createHost2Widget(options) {
+  return (tree, ctx) => {
+    const debug = !!options.debugLogging;
+    if (debug) ctx.logger.info('[widget-schematic] Raw options input: ' + JSON.stringify(options));
+    if (debug) ctx.logger.info('[widget-schematic] Using schema x-prompt only (no inquirer).');
+    // Normalize registerWidget (case-insensitive). 'no' => skip service update.
+    const rawReg = (options.registerWidget || '').trim();
+    const lower = rawReg.toLowerCase();
+    const skip = lower === 'no';
+    const normalizedCategory = skip ? 'no' : capitalizeCategory(lower);
+    if (debug) ctx.logger.info(`[widget-schematic] registerWidget raw='${rawReg}' lower='${lower}' => normalized='${normalizedCategory}' skip=${skip}`);
+
+    const nameDashed = strings.dasherize(options.name);
+    const selector = `widget-${nameDashed}`;
+    const className = `Widget${strings.classify(options.name)}Component`;
+    const widgetFolder = `${WIDGETS_DIR}/${selector}`;
+    if (tree.exists(`${widgetFolder}/${selector}.component.ts`)) {
+      throw new Error(`Widget already exists: ${selector}`);
+    }
+    const tplSource = apply(url('./files/widget'), [
+      template({
+        ...strings,
+        ...options,
+        nameDashed,
+        selector,
+        className,
+        zonesSupport: !!options.zonesSupport,
+        // Hidden defaults
+        convertUnitTo: null,
+        sampleTime: 1000,
+        icon: 'placeholder-icon',
+        description: 'TODO: Add description',
+      }),
+      move(widgetFolder)
+    ]);
+    const commonTemplateCtx = { ...strings, ...options, nameDashed, selector, className, zonesSupport: !!options.zonesSupport };
+    const specSource = options.addSpec ? apply(url('./files/spec'), [
+      template(commonTemplateCtx), move(widgetFolder)
+    ]) : null;
+    const readmeSource = options.readme ? apply(url('./files/readme'), [
+      template({
+        ...commonTemplateCtx,
+        convertUnitTo: null,
+        sampleTime: 1000,
+        icon: 'placeholder-icon',
+        description: 'TODO: Add description'
+      }), move(widgetFolder)
+    ]) : null;
+
+    return chain([
+      mergeWith(tplSource),
+      specSource ? mergeWith(specSource) : noop(),
+      readmeSource ? mergeWith(readmeSource) : noop(),
+      stripTemplateSuffixRule(widgetFolder),
+      !skip ? updateWidgetService(selector, className, { ...options, category: normalizedCategory, debugLogging: debug }) : noop(),
+      logSummary(selector, className, normalizedCategory)
+    ])(tree, ctx);
+  };
+}
+
+function logSummary(selector, className, registerMode) {
+  return (_t, ctx) => {
+    ctx.logger.info(`✔ Created ${selector} (${className})`);
+    if (registerMode !== 'no') ctx.logger.info('✔ WidgetService updated');
+    else ctx.logger.info('ℹ Skipped WidgetService update (registerWidget=no)');
+  };
+}
+
+function capitalizeCategory(lower) {
+  switch (lower) {
+    case 'core': return 'Core';
+    case 'gauge': return 'Gauge';
+    case 'component': return 'Component';
+    case 'racing': return 'Racing';
+    default: return lower; // includes 'no' or any unexpected value
+  }
+}
+
+function updateWidgetService(selector, className, opts) {
+  return (tree, ctx) => {
+    if (!tree.exists(WIDGET_SERVICE)) {
+      ctx.logger.warn('WidgetService not found; skipping auto-registration');
+      return tree;
+    }
+    if (opts.debugLogging) ctx.logger.info('[widget-schematic] Updating WidgetService for ' + className);
+    let updated = tree.read(WIDGET_SERVICE).toString('utf-8');
+    const importStatement = `import { ${className} } from '../../widgets/${selector}/${selector}.component';`;
+    updated = appendImport(updated, importStatement);
+    if (opts.debugLogging) ctx.logger.info('[widget-schematic] After import insertion.');
+    updated = updateComponentMap(updated, className);
+    if (opts.debugLogging) ctx.logger.info('[widget-schematic] After component map update.');
+    updated = insertDefinitionObject(updated, selector, className, {
+      title: opts.title || opts.name || className,
+      description: "TODO: Add description. Description is found in the item related to your widget as an item in array _widgetDefinition, found in file src/app/core/services/widget.service.ts. In this file you can also set the widget icon and other properties.",
+      icon: 'placeholder-icon', // TODO: Replace with proper icon key when you add an icon. See file src/assets/svg/icons.svg
+      category: opts.category || 'Core',
+      minWidth: 1,
+      minHeight: 1,
+      defaultWidth: 4,
+      defaultHeight: 6,
+    });
+    if (opts.debugLogging) ctx.logger.info('[widget-schematic] After definition insertion.');
+    tree.overwrite(WIDGET_SERVICE, updated);
+    return tree;
+  };
+}
+
+function stripTemplateSuffixRule(widgetFolder) {
+  return (tree) => {
+    const visit = (dirPath) => {
+      const dir = tree.getDir(dirPath);
+      dir.subfiles.forEach(fileName => {
+        if (fileName.endsWith('.template')) {
+          const fullPath = `${dirPath}/${fileName}`;
+          const newPath = fullPath.replace(/\.template$/, '');
+          const content = tree.read(fullPath);
+          if (content) {
+            if (!tree.exists(newPath)) tree.create(newPath, content);
+            tree.delete(fullPath);
+          }
+        }
+      });
+      dir.subdirs.forEach(sub => visit(`${dirPath}/${sub}`));
+    };
+    if (tree.getDir(widgetFolder)) visit(widgetFolder);
+    return tree;
+  };
+}
+
+exports.createHost2Widget = createHost2Widget;
+

package/tools/schematics/create-host2-widget/schema.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "CreateHost2WidgetSchema",
+  "title": "Create Host2 Widget",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Widget machine name without widget- prefix (kebab-case). e.g. tides-chart",
+      "minLength": 3,
+      "x-prompt": "The widget base name is the Angular component machine name (kebab-case, without widget- prefix which will be added automatically). Using base name tides-chart will create a widget-tides-chart component.\nWidget base name:"
+    },
+    "title": {
+      "type": "string",
+      "description": "The widget title is the descriptive title used in the Add Widget dialog",
+      "minLength": 3,
+      "default": "Widget Label",
+      "x-prompt": "The widget title is the descriptive title used in the Add Widget dialog.\nWidget title:"
+    },
+    "registerWidget": {
+      "type": "string",
+      "description": "Register widget and make it available in the widget Add Options dialog",
+      "enum": [
+        "No",
+        "Core",
+        "Gauge",
+        "Component",
+        "Racing"
+      ],
+      "x-prompt": "Register widget and make it available in the widget Add Options dialog (choose category or 'no' to skip):"
+    },
+    "pathType": {
+      "type": "string",
+      "description": "The type of value the Signal K path provides (number|string|boolean|Date)",
+      "enum": [
+        "number",
+        "string",
+        "boolean",
+        "Date"
+      ],
+      "default": "number",
+      "x-prompt": "Path value type (number|string|boolean|Date):"
+    },
+    "pathDefault": {
+      "type": [
+        "string",
+        "null"
+      ],
+      "default": null,
+      "description": "The default Signal K path the widget should use (if any)",
+      "x-prompt": "Type the default Signal K path value for the widget (press enter for no default):"
+    },
+    "zonesSupport": {
+      "type": "boolean",
+      "default": false,
+      "description": "Enable Signal K Zones metadata support.",
+      "x-prompt": "Enable Signal K Zones metadata support?"
+    },
+    "addSpec": {
+      "type": "boolean",
+      "default": true,
+      "description": "Generate widget spec (test) file.",
+      "x-prompt": "Generate widget tests file?"
+    },
+    "todoBlock": {
+      "type": "boolean",
+      "default": true,
+      "description": "Include TODO guidance block in component.",
+      "x-prompt": "Include TODO guidance block in component?"
+    },
+    "readme": {
+      "type": "boolean",
+      "default": true,
+      "description": "Generate developer instruction README file in the widget's folder.",
+      "x-prompt": "Generate developer instruction README file in the widget's folder?"
+    },
+    "debugLogging": {
+      "type": "boolean",
+      "default": false,
+      "description": "Enable verbose debug logging for schematic execution (normalization, prompts, service update)."
+    }
+  },
+  "required": [
+    "name",
+    "title",
+    "registerWidget"
+  ],
+  "additionalProperties": false
+}