@nys-cui/cui-formpill 0.2.9 → 0.2.20

package/component-base/src/assets/scss/_cui-formpill.scss

@@ -0,0 +1,284 @@
+cui-formpill-popover {
+    position: absolute;
+
+    &.button-menu {
+
+        position: absolute;
+        display: flex;
+
+        .popover-contents {
+            z-index: 20;
+            background-color: #FFF;
+            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+            width: auto;
+            // max-width: 85%;
+            border-radius: 5px;
+            flex-direction: column;
+            justify-content: center;
+            display: block;
+            margin-top: -5px;
+
+            .popover-footer {
+                padding: 0 10px 10px 10px
+            }
+
+
+            .popover-body {
+
+
+                // padding-right: 20px;
+                border-radius: 10px;
+
+                cui-listbox,
+                cui-text,
+                cui-date {
+                    padding-right: 40px;
+                }
+
+                cui-listbox::part(label-wrapper) {
+                    flex: 0 0 90px;
+                    min-width: 90px;
+                }
+
+                cui-date::part(label-wrapper) {
+                    flex: 0 0 90px;
+                    min-width: 90px;
+                }
+
+                cui-text::part(label-wrapper) {
+                    flex: 0 0 90px;
+                    min-width: 90px;
+                }
+
+                .popover-header {
+                    min-height: 20px;
+                    display: flex;
+                    border-bottom: 1px solid #A1A1A1;
+                    margin-bottom: 10px;
+                    flex-direction: row;
+
+
+                    h3 {
+                        margin-left: 10px;
+                        margin-top: 10px;
+                        color: #A1A1A1;
+                        margin-bottom: 10px;
+                    }
+
+                    .close-button {
+                        display: flex;
+                        align-items: center;
+                        color: var(--section-header-icon-color);
+                        font-size: xx-large;
+                        padding-bottom: 2px;
+                        margin-left: auto;
+                        margin-bottom: 0;
+                        background-color: #FFF;
+                        border: 0;
+
+                        &:hover {
+
+                            color: var(--page-icon-hover-color);
+                        }
+                    }
+                }
+
+                cui-button {
+                    button {
+                        margin-bottom: 0px;
+                    }
+                }
+            }
+
+
+            &.show {
+                display: block;
+            }
+
+            ul {
+                list-style-type: none;
+                padding: 0;
+                margin: 0;
+            }
+
+        }
+    }
+
+    &:has(dialog) {
+        left: 0;
+        right: 0 !important;
+        top: 0 !important;
+        display: flex !important;
+
+        .dialog-popover-contents {
+
+            header {
+                display: none;
+            }
+
+            .popover-header{
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+
+                button{
+                    margin: 0px 0px 0px auto;
+                }
+            }
+
+            
+
+        }
+    }
+}
+
+@media (width < 1175px) {
+    cui-formpill-popover {
+        &.button-menu {
+            .popover-contents {
+                .popover-body {
+
+                    cui-listbox,
+                    cui-text,
+                    cui-date {
+                        padding-left: 20px;
+                    }
+
+                    cui-listbox::part(label-wrapper) {
+                        flex: 0 0 0
+                    }
+
+                }
+            }
+        }
+    }
+}
+
+cui-formpill {
+
+    display: flex;
+
+    &::part(outer-wrapper) {
+
+        align-items: center;
+    }
+
+    &::part(label-wrapper) {
+
+        margin-bottom: 5px;
+    }
+
+    button {
+        display: flex !important;
+        height: 32px !important;
+        align-items: center;
+        border-radius: 8px;
+        border: 1px solid #A1A1A1;
+        cursor: pointer;
+        padding: 5px 15px;
+        margin-bottom: 0;
+        text-wrap: nowrap;
+        margin-bottom: 5px;
+
+
+        div {
+            margin-right: 5px;
+            height: 20px;
+            width: 20px;
+            display: flex;
+            align-items: center;
+            color: var(--section-header-icon-color);
+            font-size: x-large;
+            padding-bottom: 2px;
+        }
+
+        cui-icon {
+            margin-right: 5px;
+            height: 20px;
+            width: 20px;
+            display: flex;
+            align-items: center;
+
+            &.accessibleHideLabel {
+                margin-right: 0px;
+            }
+
+            svg {
+                height: 20px;
+                width: 20px;
+                fill: var(--section-header-icon-color);
+                stroke: var(--section-header-icon-color);
+            }
+        }
+
+        &:hover {
+
+            div {
+                color: var(--page-icon-hover-color);
+            }
+        }
+    }
+
+    .pill-container {
+        display: flex;
+        margin-left: 10px;
+        flex-wrap: wrap;
+    }
+
+    cui-formpill-pill {
+
+        margin-bottom: 5px;
+
+        .form-pill {
+
+            display: flex;
+            background-color: #F6F3F4;
+            border: 1px solid #A1A1A1;
+            color: black;
+            text-align: center;
+            margin-right: 10px;
+            height: 32px;
+            justify-content: center;
+            align-items: center;
+            border-radius: 8px;
+            padding-right: 5px;
+            cursor: pointer;
+
+            button {
+                cursor: pointer;
+                border: 0;
+                background: none;
+                font-weight: 500;
+                color: var(--section-header-icon-color);
+                font-size: x-large;
+                justify-content: center;
+                align-items: center;
+                padding: 7px 10px 5px 10px;
+                margin: 0;
+
+
+                &:hover {
+                    color: var(--page-icon-hover-color);
+                }
+
+            }
+
+        }
+
+        .pill-title {
+            font-size: 13.3333px;
+            margin: 0;
+            height: 100%;
+            padding-left: 10px;
+            padding: 5px 15px;
+            display: flex;
+            align-items: center;
+            user-select: none;
+            text-wrap: nowrap;
+
+        }
+    }
+
+    
+}

package/component-base/src/assets/scss/_cui-general.scss

@@ -0,0 +1,19 @@
+.cui-align-left{
+	text-align: left;
+}
+
+.cui-align-center{
+	text-align: center;
+}
+
+.cui-align-right{
+	text-align: right;
+}
+
+.cui-min-width{
+	width: 1px;
+}
+
+.cui-no-wrap{
+	white-space: nowrap;
+}

package/component-base/src/assets/scss/_cui-message.scss

@@ -0,0 +1,119 @@
+@use '_variables.scss';
+
+$color_successPrimary: #43b17a;
+$color_successSecondary: #DFF0D8;
+$color_successText: #fff;
+
+$color_infoPrimary: #397dbb;
+$color_infoSecondary: #F0F9FF;
+$color_infoText: #fff;
+
+$color_warningPrimary: #ffeb95;
+$color_warningSecondary: #fff6cc;
+$color_warningText: #222;
+
+$color_errorPrimary: #bd4e4e;
+$color_errorSecondary: #f9e7e7;
+$color_errorText: #fff;
+
+
+
+
+cui-message{
+
+	.cui-message{
+		display: flex;
+		padding: 6px;
+		margin-top:6px;
+		box-shadow: variables.$sectionShadowBoxColor variables.$sectionShadowBoxX variables.$sectionShadowBoxY variables.$sectionShadowBoxBlur;
+
+
+		.cui-message-contents {
+			padding-top: 0.2em;
+		}
+
+		.cui-message-icon{
+			margin-right:6px;
+			
+			cui-icon,
+			cui-icon svg{
+			    display: inline-block;
+			    height:24px;
+			    width:24px;
+			    vertical-align: bottom;
+			    
+			}
+		}
+
+		&.cui-message-success{
+			color: $color_successText;
+			background: $color_successPrimary;
+			border: solid 1px $color_successPrimary;
+			border-left: solid 5px $color_successPrimary;
+			border-radius: 5px;
+			
+		}
+
+		&.cui-message-info{
+			color: $color_infoText;
+			background: $color_infoPrimary;
+			border: solid 1px $color_infoPrimary;
+			border-left: solid 5px $color_infoPrimary;
+			border-radius: 5px;
+
+			cui-icon {
+				svg {
+					path {
+						stroke: #FFF;
+
+						&#dot {
+							fill: #FFF;
+						}
+					}
+				}
+			}
+		}
+
+		&.cui-message-warning{
+			color: $color_warningText;
+			background: $color_warningPrimary;
+			border: solid 1px $color_warningPrimary;
+			border-left: solid 5px $color_warningPrimary;
+			border-radius: 5px;
+			
+		}
+
+		&.cui-message-error{
+			color: $color_errorText;
+			background: $color_errorPrimary;
+			border: solid 1px $color_errorPrimary;
+			border-left: solid 5px $color_errorPrimary;
+			border-radius: 5px;
+
+			
+		}
+
+
+	}
+}
+
+// cui-date .cui-message{
+//     margin-top:2px !important;
+// }
+
+// cui-textarea .cui-message{
+//     margin-top:2px !important;
+// }
+
+
+cui-section {
+	cui-message-list[slot="section-messages"] {
+		cui-message .cui-message {
+			margin: 0px 10px 10px 10px;
+		}
+
+		cui-message:last-of-type .cui-message {
+			margin-bottom: 20px;
+		}
+	}
+}

package/component-base/src/assets/scss/_cui-spinner.scss

@@ -0,0 +1,27 @@
+cui-spinner {
+    --cui-loading-spinners-color: var(--cui-loading-spinner-color, #fff);
+    --cui-loading-spinners-bcgcolor: var(--cui-loading-spinners-backgroundcolor, 28, 28, 28);
+    position: fixed;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    z-index: 1000;
+    left: 0;
+    cursor: none;
+
+
+}
+
+cui-section {
+    &::part(section-spinner) {
+        --cui-loading-spinners-color: var(--cui-loading-spinner-color, #fff);
+        --cui-loading-spinners-bcgcolor: var(--cui-loading-spinners-backgroundcolor, 28, 28, 28);
+        position: absolute !important;
+        width: 100%;
+        height: 100%;
+        cursor: none;
+        top: 0;
+        z-index: 1000;
+    }
+}

package/component-base/src/assets/scss/_cui-tree.scss

@@ -0,0 +1,136 @@
+cui-tree {
+
+    cui-tree-branch {
+        .expandBtn {
+            font-family: var(--page-font);
+            font-size: var(--standard-font-size);
+            color: rgb(34, 34, 34);
+            border: none;
+            background: transparent;
+            margin-bottom: 0px;
+            padding: 2px 3px;
+            cursor: pointer;
+            text-align: left;
+        }
+    }
+
+    cui-tree-branch, cui-tree-leaf {
+        &::part(infoRow)::before {
+            margin-left: -10px;
+        }
+
+        cui-icon svg {
+            height:24px;
+            width: 24px;
+        }
+    }
+
+    .header {
+        &::part(leafText), .expandBtn
+        {
+            font-weight: 600;
+        }
+    }
+
+    &.sideNav {
+        &::part(trunk) {
+            padding-left: 20px;
+        }
+
+        cui-tree-leaf, cui-tree-branch {
+            &:first-child::part(appendage) {
+                padding-top: unset;
+            }
+
+            &::part(appendage) {
+                padding-top: 5px;
+            }
+
+            &::part(leafText), .expandBtn {
+                font-size: 15px;
+                color: #333;
+            }
+
+            &.header {
+                &::part(leafText), .expandBtn
+                {
+                    font-size: 16px;
+                }
+            }
+
+            .expandBtn:hover {
+                text-decoration: underline;
+            }
+
+            &::part(infoRow)::before {
+                border-left-color: #333;
+            }
+
+            cui-link a {
+                text-decoration: unset;
+                color: #333;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            cui-button button {
+                font-family: var(--page-font);
+                font-size: var(--standard-font-size);
+            }
+        }
+    }
+
+    cui-button[slot=controls] {
+        button {
+            background: transparent;
+            border: none;
+            padding: unset;
+            margin: unset;
+
+            cui-icon svg {
+                height:18px;
+                width: 18px;
+            }
+        }
+        
+    }
+
+    
+}
+
+cui-section cui-tree {
+    margin-bottom: 20px;
+
+    cui-tree-leaf {
+        padding-left: 1.2em;
+    }
+
+    cui-tree-branch {
+        &> {
+            cui-tree-branch {
+                padding-left: .4em;
+            }
+
+            cui-tree-leaf {
+                padding-left: 1.7em;
+            }
+        }
+
+        &[selectable]:not([selectable='false']){
+            &> {
+                cui-tree-branch {
+                    padding-left: .63em;
+                    .expandBtn {
+                        padding-left: 0px;
+                    }
+                }
+
+                cui-tree-leaf {
+                    padding-left: 1.7em;
+                }
+            }
+        }
+    }
+}

package/component-base/src/assets/scss/_cui-widget.scss

@@ -0,0 +1,128 @@
+.page.index-page{
+    text-align: -webkit-center;
+
+    h1 {
+        text-align: left;
+    }
+
+    .grid {
+        max-width: 1024px;
+        text-align: left;
+    }
+    
+}
+
+cui-widget {
+    &::part(widget-title) {
+        color: #a1a1a1;
+    }
+
+    &::part(category-label) {
+        color: #a1a1a1;
+        font-weight: 600;
+    }
+
+    cui-icon {
+        display: block;
+        width: 20px;
+        height: 20px;
+
+        svg {
+            path {
+                stroke: #a1a1a1;
+            }
+
+            circle {
+                stroke: #a1a1a1;
+            }
+        }
+    }
+
+    &.construction {
+        &::part(widget-section) {
+            background-image: linear-gradient(45deg, #ffcc00 25%, #000 25%, #000 50%, #ffcc00 50%, #ffcc00 75%, #000 75%, #000 100%);
+            background-size: 56.57px 56.57px;
+        }
+
+        &::part(widget-header) {
+            width: calc(100% - 1em);
+            padding: 0px;
+            text-align: center;
+            display: inline-block;
+            background-color: #fc0;
+            margin: .5em .5em 0em .5em;
+        }
+
+        &::part(widget-body) {
+            padding: 0px;
+        }
+
+        &::part(widget-title) {
+            color: black;
+            margin-block-start: 7px;
+            margin-block-end: 7px;
+        }
+
+        .widget-instructions {
+            width: calc(100% - 1em);
+            background-color: #fc0;
+            display: inline-block;
+            color: black;
+            margin: 0em .5em .5em .5em;
+            text-align: center;
+            padding-bottom: 5px;
+        }
+    }
+
+    &.welcome {
+        &::part(widget-section) {
+            background-color: #adcce9;
+        }
+
+        &::part(widget-title) {
+            color: black;
+        }
+
+        p, li {
+            color: black;
+        }
+
+        li {
+            padding-bottom: 5px;
+
+            &:last-of-type {
+                padding-bottom: 10px;
+            }
+        }
+    }
+
+    cui-button.invis-btn button {
+        background: rgba(0, 0, 0, 0);
+        border: 0;
+        margin-bottom: 0px;
+
+        cui-icon svg {
+            height: 24px;
+            width: 24px;
+        }
+    }
+}
+
+cui-widget-popover {
+    position: absolute;
+
+    .popover-contents {
+        background: #fff;
+        border-radius: 5px;
+        color: #333;
+        box-shadow: 1px 2px 5px #ccc;
+
+        .popover-body {
+            padding: 5px 5px;
+
+            button {
+                margin-bottom: 0px;
+            }
+        }
+    }
+}