ms-design-system 0.0.27 → 0.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ms-design-system.mjs +638 -140
- package/fesm2022/ms-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/data-grid/icons/File-pdf.svg +7 -0
- package/src/assets/data-grid/icons/align-center.svg +5 -0
- package/src/assets/data-grid/icons/align-left.svg +3 -0
- package/src/assets/data-grid/icons/align-right.svg +3 -0
- package/src/assets/data-grid/icons/bullet-list.svg +8 -0
- package/src/assets/data-grid/icons/file-plus.svg +6 -0
- package/src/assets/data-grid/icons/letters-list.svg +8 -0
- package/src/assets/data-grid/icons/number-list.svg +7 -0
- package/src/assets/data-grid/icons/upload.svg +4 -3
- package/src/assets/data-grid/icons/verticalLine.svg +3 -0
- package/src/styles.scss +119 -49
- package/types/ms-design-system.d.ts +116 -9
package/package.json
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M4.00033 14.6663C3.6467 14.6663 3.30756 14.5259 3.05752 14.2758C2.80747 14.0258 2.66699 13.6866 2.66699 13.333V2.66634C2.66699 2.31272 2.80747 1.97358 3.05752 1.72353C3.30756 1.47349 3.6467 1.33301 4.00033 1.33301H9.33366C9.5447 1.33267 9.75371 1.37408 9.94868 1.45486C10.1436 1.53563 10.3207 1.65418 10.4697 1.80368L12.8617 4.19568C13.0116 4.34468 13.1304 4.52191 13.2115 4.71712C13.2925 4.91233 13.334 5.12166 13.3337 5.33301V13.333C13.3337 13.6866 13.1932 14.0258 12.9431 14.2758C12.6931 14.5259 12.3539 14.6663 12.0003 14.6663H4.00033Z" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M9.33301 1.33301V4.66634C9.33301 4.84315 9.40325 5.01272 9.52827 5.13775C9.65329 5.26277 9.82286 5.33301 9.99967 5.33301H13.333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M6.66634 6H5.33301" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M10.6663 8.66699H5.33301" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M10.6663 11.333H5.33301" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M2.66675 4H13.3334" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M5.33325 8H10.6666" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M4 12H12" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6 4H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M6 8H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M6 12H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M3.33325 4V4.00667" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M3.33325 8V8.00667" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path d="M3.33325 12V12.0067" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M4.99967 18.3337C4.55765 18.3337 4.13372 18.1581 3.82116 17.8455C3.5086 17.5329 3.33301 17.109 3.33301 16.667V3.33366C3.33301 2.89163 3.5086 2.46771 3.82116 2.15515C4.13372 1.84259 4.55765 1.66699 4.99967 1.66699H11.6663C11.9301 1.66657 12.1914 1.71833 12.4351 1.8193C12.6788 1.92027 12.9001 2.06846 13.0863 2.25533L16.0763 5.24533C16.2637 5.43158 16.4123 5.65312 16.5136 5.89713C16.6149 6.14114 16.6668 6.4028 16.6663 6.66699V16.667C16.6663 17.109 16.4907 17.5329 16.1782 17.8455C15.8656 18.1581 15.4417 18.3337 14.9997 18.3337H4.99967Z" stroke="#6A6B6D" stroke-width="1.5625" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M11.667 1.66699V5.83366C11.667 6.05467 11.7548 6.26663 11.9111 6.42291C12.0674 6.57919 12.2793 6.66699 12.5003 6.66699H16.667" stroke="#6A6B6D" stroke-width="1.5625" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M7.5 12.5H12.5" stroke="#6A6B6D" stroke-width="1.5625" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M10 15V10" stroke="#6A6B6D" stroke-width="1.5625" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7.33325 4H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M7.33325 8H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M7.33325 12H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M2.66675 6.66663V3.66663C2.66675 3.40141 2.7721 3.14706 2.95964 2.95952C3.14718 2.77198 3.40153 2.66663 3.66675 2.66663C3.93196 2.66663 4.18632 2.77198 4.37386 2.95952C4.56139 3.14706 4.66675 3.40141 4.66675 3.66663V6.66663" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M2.66675 5.33337H4.66675" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path d="M3.66675 11.3334C3.93196 11.3334 4.18632 11.4387 4.37386 11.6263C4.56139 11.8138 4.66675 12.0682 4.66675 12.3334C4.66675 12.5986 4.56139 12.8529 4.37386 13.0405C4.18632 13.228 3.93196 13.3334 3.66675 13.3334H2.66675V9.33337H3.66675C3.93196 9.33337 4.18632 9.43873 4.37386 9.62627C4.56139 9.8138 4.66675 10.0682 4.66675 10.3334C4.66675 10.5986 4.56139 10.8529 4.37386 11.0405C4.18632 11.228 3.93196 11.3334 3.66675 11.3334ZM3.66675 11.3334H2.66675" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7.33325 4H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M7.33325 8H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M8 12H13.3333" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M2.66675 10.6667C2.66675 10.3131 2.80722 9.97395 3.05727 9.7239C3.30732 9.47385 3.64646 9.33337 4.00008 9.33337C4.3537 9.33337 4.69284 9.47385 4.94289 9.7239C5.19294 9.97395 5.33341 10.3131 5.33341 10.6667C5.33341 11.0607 5.00008 11.3334 4.66675 11.6667L2.66675 13.3334H5.33341" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M4.00008 6.66663V2.66663L2.66675 3.99996" stroke="#1B1F22" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
</svg>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M8 2V10" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M11.3337 5.33333L8.00033 2L4.66699 5.33333" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
5
|
</svg>
|
|
4
|
-
|
package/src/styles.scss
CHANGED
|
@@ -729,19 +729,30 @@ ms-button {
|
|
|
729
729
|
}
|
|
730
730
|
|
|
731
731
|
.ms-border {
|
|
732
|
-
border: 1px solid #
|
|
732
|
+
border: 1px solid #E0E0E0 !important;
|
|
733
733
|
}
|
|
734
734
|
|
|
735
735
|
.ms-border-left {
|
|
736
|
-
border-left: 1px solid #
|
|
736
|
+
border-left: 1px solid #E0E0E0 !important;
|
|
737
737
|
}
|
|
738
738
|
|
|
739
|
-
.ms-border-bottom
|
|
740
|
-
border-bottom:
|
|
739
|
+
.ms-border-bottom {
|
|
740
|
+
border-bottom: 1px solid var(--semantics-border-status-success-primary-default, #E0E0E0) !important;
|
|
741
741
|
}
|
|
742
742
|
|
|
743
|
-
.ms-border-
|
|
744
|
-
border
|
|
743
|
+
.ms-border-0 {
|
|
744
|
+
border: none !important;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
.ms-border-right {
|
|
748
|
+
border-right: 1px solid #E0E0E0 !important;
|
|
749
|
+
}
|
|
750
|
+
.ms-border-top {
|
|
751
|
+
border-top: 1px solid #E0E0E0 !important;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
.ms-border-bottom-success-2px {
|
|
755
|
+
border-bottom: 2px solid var(--semantics-border-status-success-primary-default, #00935C) !important
|
|
745
756
|
}
|
|
746
757
|
|
|
747
758
|
.ms-border-success-2px {
|
|
@@ -1003,16 +1014,6 @@ ms-button .ms-btn-default {
|
|
|
1003
1014
|
border: none !important;
|
|
1004
1015
|
}
|
|
1005
1016
|
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
.ms-border-0 {
|
|
1009
|
-
border: none !important;
|
|
1010
|
-
}
|
|
1011
|
-
|
|
1012
|
-
.ms-border-right {
|
|
1013
|
-
border-right: 1px solid #E0E0E0 !important;
|
|
1014
|
-
}
|
|
1015
|
-
|
|
1016
1017
|
.ms-w-50 {
|
|
1017
1018
|
width: 50% !important;
|
|
1018
1019
|
}
|
|
@@ -1560,9 +1561,7 @@ ms-button .ms-btn-default {
|
|
|
1560
1561
|
}
|
|
1561
1562
|
}
|
|
1562
1563
|
|
|
1563
|
-
|
|
1564
|
-
border-bottom: 1px solid var(--semantics-border-status-success-primary-default, #E0E0E0) !important;
|
|
1565
|
-
}
|
|
1564
|
+
|
|
1566
1565
|
|
|
1567
1566
|
.ms-scroll-h-195-calc {
|
|
1568
1567
|
height: calc(100vh - 195px) !important;
|
|
@@ -1583,8 +1582,8 @@ ms-button .ms-btn-default {
|
|
|
1583
1582
|
}
|
|
1584
1583
|
|
|
1585
1584
|
.ms-checkbox-box {
|
|
1586
|
-
width:
|
|
1587
|
-
height:
|
|
1585
|
+
width: 14px;
|
|
1586
|
+
height: 14px;
|
|
1588
1587
|
border: 2px solid #cbd5e1;
|
|
1589
1588
|
border-radius: 4px;
|
|
1590
1589
|
display: grid;
|
|
@@ -1594,9 +1593,14 @@ ms-button .ms-btn-default {
|
|
|
1594
1593
|
}
|
|
1595
1594
|
|
|
1596
1595
|
.ms-checkmark {
|
|
1597
|
-
color: #
|
|
1598
|
-
font-size:
|
|
1599
|
-
line-height: 1;
|
|
1596
|
+
color: #FFFFFF;
|
|
1597
|
+
font-size: 13px !important;
|
|
1598
|
+
// line-height: 1;
|
|
1599
|
+
// width: 6.790122985839844px !important;
|
|
1600
|
+
// height: 5.5px;
|
|
1601
|
+
// opacity: 1;
|
|
1602
|
+
// border-width: 1.5px;
|
|
1603
|
+
|
|
1600
1604
|
}
|
|
1601
1605
|
|
|
1602
1606
|
.ms-indeterminate {
|
|
@@ -1628,6 +1632,17 @@ ms-button .ms-btn-default {
|
|
|
1628
1632
|
&.disabled {
|
|
1629
1633
|
opacity: 0.5;
|
|
1630
1634
|
cursor: not-allowed;
|
|
1635
|
+
// background: #EBEBEB;
|
|
1636
|
+
// border-color: #E0E0E0;
|
|
1637
|
+
input:checked+.ms-checkbox-box,
|
|
1638
|
+
.ms-checkbox-box:has(.ms-indeterminate) {
|
|
1639
|
+
background: #EBEBEB;
|
|
1640
|
+
border-color: #E0E0E0;
|
|
1641
|
+
}
|
|
1642
|
+
.ms-checkmark{
|
|
1643
|
+
color: #ABABAB;
|
|
1644
|
+
|
|
1645
|
+
}
|
|
1631
1646
|
}
|
|
1632
1647
|
|
|
1633
1648
|
.ms-label {
|
|
@@ -1781,25 +1796,30 @@ ms-button .ms-btn-default {
|
|
|
1781
1796
|
}
|
|
1782
1797
|
|
|
1783
1798
|
&:hover:not(.disabled) .ms-toggle-track {
|
|
1784
|
-
background: #
|
|
1799
|
+
background: #0084FF1A; // light blue hover
|
|
1800
|
+
background: var(--semantics-fill-status-info-secondary-disabled, #0084FF1A);
|
|
1801
|
+
|
|
1785
1802
|
}
|
|
1786
|
-
|
|
1803
|
+
|
|
1787
1804
|
.ms-radio-circle:focus {
|
|
1788
1805
|
// outline: 2px solid #B7DCFF;
|
|
1789
1806
|
box-shadow: 0px 0px 0px 0.91px var(--primitivesbrandblue-100);
|
|
1790
1807
|
border: 0.91px solid var(--semantics-border-brand-default, #0084FF);
|
|
1791
1808
|
outline-offset: 2px;
|
|
1792
1809
|
}
|
|
1793
|
-
|
|
1810
|
+
|
|
1794
1811
|
&.invalid {
|
|
1795
1812
|
.ms-toggle-track {
|
|
1796
1813
|
border: 1px solid red;
|
|
1797
1814
|
}
|
|
1798
1815
|
}
|
|
1799
|
-
|
|
1816
|
+
|
|
1800
1817
|
&.disabled {
|
|
1801
1818
|
cursor: not-allowed;
|
|
1802
1819
|
opacity: 0.6;
|
|
1820
|
+
.ms-toggle input:checked {
|
|
1821
|
+
background: #0084FF; // darker blue on hover
|
|
1822
|
+
}
|
|
1803
1823
|
|
|
1804
1824
|
.ms-label {
|
|
1805
1825
|
color: #999;
|
|
@@ -1929,6 +1949,17 @@ ms-button .ms-btn-default {
|
|
|
1929
1949
|
&.disabled {
|
|
1930
1950
|
opacity: 0.5;
|
|
1931
1951
|
cursor: not-allowed;
|
|
1952
|
+
input:checked+.ms-radio-circle {
|
|
1953
|
+
border-color: #CCCCCC;
|
|
1954
|
+
background-color: #EBEBEB;
|
|
1955
|
+
}
|
|
1956
|
+
&:hover:not(.disabled):not(.skeleton) .ms-radio-circle {
|
|
1957
|
+
border-color: #CCCCCC;
|
|
1958
|
+
background-color: #EBEBEB;
|
|
1959
|
+
}
|
|
1960
|
+
.ms-radio-dot {
|
|
1961
|
+
background: #1F24281A;
|
|
1962
|
+
}
|
|
1932
1963
|
}
|
|
1933
1964
|
|
|
1934
1965
|
.ms-radio-skeleton {
|
|
@@ -1955,7 +1986,7 @@ ms-button .ms-btn-default {
|
|
|
1955
1986
|
-moz-border-radius: 8px;
|
|
1956
1987
|
-ms-border-radius: 8px;
|
|
1957
1988
|
-o-border-radius: 8px;
|
|
1958
|
-
height:
|
|
1989
|
+
height: 10px;
|
|
1959
1990
|
gap: 6 ;
|
|
1960
1991
|
opacity: 1 ;
|
|
1961
1992
|
border-width: 1px ;
|
|
@@ -1974,6 +2005,7 @@ ms-button .ms-btn-default {
|
|
|
1974
2005
|
&.ms-error {
|
|
1975
2006
|
border-color: #DA3E37;
|
|
1976
2007
|
background-color: #fbeaea;
|
|
2008
|
+
box-shadow: 0px 0px 0px 1px #DA3E3740;
|
|
1977
2009
|
}
|
|
1978
2010
|
|
|
1979
2011
|
// Disabled state
|
|
@@ -2032,12 +2064,12 @@ border: 1px solid var(--semantics-border-brand-default, #0084FF);
|
|
|
2032
2064
|
|
|
2033
2065
|
|
|
2034
2066
|
.ms-form-control.ms-error {
|
|
2035
|
-
|
|
2067
|
+
box-shadow: 0px 0px 0px 1px #DA3E3740;
|
|
2036
2068
|
border: 1px solid var(--semantics-border-status-error-primary-default, #DA3E37)
|
|
2037
2069
|
|
|
2038
2070
|
}
|
|
2039
2071
|
.ms-form-control.invalid {
|
|
2040
|
-
box-shadow: 0px 0px 0px 1px
|
|
2072
|
+
box-shadow: 0px 0px 0px 1px #DA3E3740;
|
|
2041
2073
|
border: 1px solid var(--semantics-border-status-error-primary-default, #DA3E37)
|
|
2042
2074
|
|
|
2043
2075
|
}
|
|
@@ -2057,23 +2089,30 @@ color: var(--semantics-text-on-fill-subtle-disabled, #ABABAB);
|
|
|
2057
2089
|
// border-radius: 50%;
|
|
2058
2090
|
cursor: pointer;
|
|
2059
2091
|
overflow: visible;
|
|
2060
|
-
|
|
2092
|
+
&.no-background{
|
|
2093
|
+
background: none !important;
|
|
2094
|
+
}
|
|
2061
2095
|
img {
|
|
2062
2096
|
width: 100%;
|
|
2063
2097
|
height: 100%;
|
|
2064
2098
|
object-fit: cover;
|
|
2065
2099
|
}
|
|
2066
2100
|
|
|
2067
|
-
|
|
2068
|
-
border-radius: 50%;
|
|
2069
|
-
-webkit-border-radius: 50%;
|
|
2070
|
-
-moz-border-radius: 50%;
|
|
2071
|
-
-ms-border-radius: 50%;
|
|
2072
|
-
-o-border-radius: 50%;
|
|
2073
|
-
}
|
|
2101
|
+
/* IMAGE SHOULD FOLLOW SHAPE */
|
|
2074
2102
|
|
|
2075
|
-
|
|
2076
|
-
|
|
2103
|
+
|
|
2104
|
+
/* SHAPES */
|
|
2105
|
+
|
|
2106
|
+
.ms-avatar-img-circle {
|
|
2107
|
+
border-radius: 50%;
|
|
2108
|
+
background: none !important;
|
|
2109
|
+
background-color: none !important;
|
|
2110
|
+
}
|
|
2111
|
+
|
|
2112
|
+
.ms-avatar-img-square {
|
|
2113
|
+
background-color: none !important;
|
|
2114
|
+
background: none !important;
|
|
2115
|
+
border-radius: 6px;
|
|
2077
2116
|
}
|
|
2078
2117
|
|
|
2079
2118
|
&.disabled {
|
|
@@ -2154,13 +2193,22 @@ font-size: 8px !important;
|
|
|
2154
2193
|
|
|
2155
2194
|
/* SHAPES */
|
|
2156
2195
|
|
|
2157
|
-
|
|
2196
|
+
|
|
2197
|
+
}
|
|
2198
|
+
.ms-avatar-circle {
|
|
2158
2199
|
border-radius: 50%;
|
|
2159
|
-
|
|
2200
|
+
-webkit-border-radius: 50%;
|
|
2201
|
+
-moz-border-radius: 50%;
|
|
2202
|
+
-ms-border-radius: 50%;
|
|
2203
|
+
-o-border-radius: 50%;
|
|
2204
|
+
}
|
|
2160
2205
|
|
|
2161
|
-
.ms-avatar-
|
|
2162
|
-
border-radius:
|
|
2163
|
-
|
|
2206
|
+
.ms-avatar-square {
|
|
2207
|
+
border-radius: 8px;
|
|
2208
|
+
-webkit-border-radius: 8px;
|
|
2209
|
+
-moz-border-radius: 8px;
|
|
2210
|
+
-ms-border-radius: 8px;
|
|
2211
|
+
-o-border-radius: 8px;
|
|
2164
2212
|
}
|
|
2165
2213
|
|
|
2166
2214
|
.ms-avatar-group {
|
|
@@ -2198,7 +2246,11 @@ color: var(--semantics-text-on-fill-subtle-disabled, #ABABAB);
|
|
|
2198
2246
|
|
|
2199
2247
|
&.ms-avatar-square {
|
|
2200
2248
|
border-radius: 8px;
|
|
2201
|
-
|
|
2249
|
+
-webkit-border-radius: 8px;
|
|
2250
|
+
-moz-border-radius: 8px;
|
|
2251
|
+
-ms-border-radius: 8px;
|
|
2252
|
+
-o-border-radius: 8px;
|
|
2253
|
+
}
|
|
2202
2254
|
|
|
2203
2255
|
&.disabled {
|
|
2204
2256
|
opacity: 0.5;
|
|
@@ -2312,6 +2364,22 @@ font-size: 8px !important;
|
|
|
2312
2364
|
max-height: 180px; // 🔥 scroll only on expand
|
|
2313
2365
|
overflow-y: auto;
|
|
2314
2366
|
}
|
|
2367
|
+
/* IMAGE SHOULD FOLLOW SHAPE */
|
|
2368
|
+
.ms-avatar-img {
|
|
2369
|
+
width: 100%;
|
|
2370
|
+
height: 100%;
|
|
2371
|
+
object-fit: cover;
|
|
2372
|
+
}
|
|
2373
|
+
|
|
2374
|
+
/* SHAPES */
|
|
2375
|
+
|
|
2376
|
+
.ms-avatar-img-circle {
|
|
2377
|
+
border-radius: 50%;
|
|
2378
|
+
}
|
|
2379
|
+
|
|
2380
|
+
.ms-avatar-img-square {
|
|
2381
|
+
border-radius: 6px;
|
|
2382
|
+
}
|
|
2315
2383
|
}
|
|
2316
2384
|
|
|
2317
2385
|
.ms-avatar-action {
|
|
@@ -2361,6 +2429,7 @@ font-size: 8px !important;
|
|
|
2361
2429
|
color: #6A6B6D;
|
|
2362
2430
|
font-weight: 500;
|
|
2363
2431
|
text-align: center;
|
|
2432
|
+
margin: 0px !important;
|
|
2364
2433
|
}
|
|
2365
2434
|
|
|
2366
2435
|
/* --------------------------------------
|
|
@@ -2480,6 +2549,7 @@ border-top-color: #F5F5F5;
|
|
|
2480
2549
|
&.ms-error {
|
|
2481
2550
|
border-color: #d9534f;
|
|
2482
2551
|
background-color: #fbeaea;
|
|
2552
|
+
box-shadow: 0px 0px 0px 1px #DA3E3740;
|
|
2483
2553
|
}
|
|
2484
2554
|
|
|
2485
2555
|
// Disabled state
|
|
@@ -2523,12 +2593,12 @@ border: 1px solid var(--semantics-border-brand-default, #0084FF);
|
|
|
2523
2593
|
}
|
|
2524
2594
|
|
|
2525
2595
|
.ms-textArea.ms-error {
|
|
2526
|
-
|
|
2596
|
+
box-shadow: 0px 0px 0px 1px #DA3E3740;
|
|
2527
2597
|
border: 1px solid var(--semantics-border-status-error-primary-default, #DA3E37)
|
|
2528
2598
|
|
|
2529
2599
|
}
|
|
2530
2600
|
.ms-textArea.invalid {
|
|
2531
|
-
|
|
2601
|
+
box-shadow: 0px 0px 0px 1px #DA3E3740;
|
|
2532
2602
|
border: 1px solid var(--semantics-border-status-error-primary-default, #DA3E37)
|
|
2533
2603
|
|
|
2534
2604
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, EnvironmentProviders } from '@angular/core';
|
|
2
|
+
import { OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, ChangeDetectorRef, ViewContainerRef, ComponentFactoryResolver, EnvironmentProviders } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
|
|
4
4
|
import * as i1 from 'ng-inline-svg';
|
|
5
5
|
|
|
@@ -305,7 +305,7 @@ declare class MsTextArea {
|
|
|
305
305
|
loading: boolean;
|
|
306
306
|
invalid: boolean;
|
|
307
307
|
skeleton: boolean;
|
|
308
|
-
minlength?:
|
|
308
|
+
minlength?: any;
|
|
309
309
|
maxlength?: number;
|
|
310
310
|
ms_rows: number;
|
|
311
311
|
ms_cols?: number;
|
|
@@ -313,8 +313,30 @@ declare class MsTextArea {
|
|
|
313
313
|
resize: 'none' | 'both' | 'horizontal' | 'vertical';
|
|
314
314
|
scrollable: boolean;
|
|
315
315
|
showResizeIcon: boolean;
|
|
316
|
+
isDisabled: boolean;
|
|
317
|
+
showFormatOptions: boolean;
|
|
318
|
+
maxWidth: number;
|
|
319
|
+
maxHeight: number;
|
|
316
320
|
value: i0.WritableSignal<string>;
|
|
317
321
|
hasError: i0.WritableSignal<boolean>;
|
|
322
|
+
paragraphType: string;
|
|
323
|
+
isBold: boolean;
|
|
324
|
+
isItalic: boolean;
|
|
325
|
+
isUnderline: boolean;
|
|
326
|
+
textAlignment: string;
|
|
327
|
+
fontSize: string;
|
|
328
|
+
fontWeight: string;
|
|
329
|
+
listType: string;
|
|
330
|
+
showLinkDropdown: boolean;
|
|
331
|
+
showImageDropdown: boolean;
|
|
332
|
+
textArea: ElementRef<HTMLTextAreaElement>;
|
|
333
|
+
linkUrl: string;
|
|
334
|
+
linkText: string;
|
|
335
|
+
imageUrl: string;
|
|
336
|
+
imageAlt: string;
|
|
337
|
+
formattingItems: any[];
|
|
338
|
+
listTypeItems: any[];
|
|
339
|
+
paraTypeItems: any[];
|
|
318
340
|
change: EventEmitter<Event>;
|
|
319
341
|
focus: EventEmitter<Event>;
|
|
320
342
|
blur: EventEmitter<Event>;
|
|
@@ -326,8 +348,26 @@ declare class MsTextArea {
|
|
|
326
348
|
setDisabledState(isDisabled: boolean): void;
|
|
327
349
|
handleInput(event: Event): void;
|
|
328
350
|
handleBlur(event: Event): void;
|
|
351
|
+
onSelectItem(event: any): void;
|
|
352
|
+
onSelectlistType(event: any): void;
|
|
353
|
+
onSelectPara(event: any): void;
|
|
354
|
+
changeParagraphType(type: string): void;
|
|
355
|
+
textValue: string;
|
|
356
|
+
changeListType(type: string): void;
|
|
357
|
+
getListPrefix(type: string): string;
|
|
358
|
+
handleEnter(event: Event): void;
|
|
359
|
+
toggleBold(): void;
|
|
360
|
+
toggleItalic(): void;
|
|
361
|
+
toggleUnderline(): void;
|
|
362
|
+
changeTextAlignment(alignment: string): void;
|
|
363
|
+
toggleLinkDropdown(): void;
|
|
364
|
+
closeLinkDropdown(): void;
|
|
365
|
+
insertLink(): void;
|
|
366
|
+
toggleImageDropdown(): void;
|
|
367
|
+
closeImageDropdown(): void;
|
|
368
|
+
insertImage(): void;
|
|
329
369
|
static ɵfac: i0.ɵɵFactoryDeclaration<MsTextArea, never>;
|
|
330
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MsTextArea, "ms-text-area", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "ms_rows": { "alias": "ms_rows"; "required": false; }; "ms_cols": { "alias": "ms_cols"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "resize": { "alias": "resize"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "showResizeIcon": { "alias": "showResizeIcon"; "required": false; }; }, {}, never, never, true, never>;
|
|
370
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MsTextArea, "ms-text-area", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "ms_rows": { "alias": "ms_rows"; "required": false; }; "ms_cols": { "alias": "ms_cols"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "resize": { "alias": "resize"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "showResizeIcon": { "alias": "showResizeIcon"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "showFormatOptions": { "alias": "showFormatOptions"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, {}, never, never, true, never>;
|
|
331
371
|
}
|
|
332
372
|
|
|
333
373
|
declare class MsAvatar {
|
|
@@ -342,8 +382,7 @@ declare class MsAvatar {
|
|
|
342
382
|
disabled: boolean;
|
|
343
383
|
skeleton: boolean;
|
|
344
384
|
isStatusShow: boolean;
|
|
345
|
-
|
|
346
|
-
subType?: any;
|
|
385
|
+
subType?: string;
|
|
347
386
|
label?: any;
|
|
348
387
|
label2?: any;
|
|
349
388
|
status?: any;
|
|
@@ -360,10 +399,12 @@ declare class MsAvatar {
|
|
|
360
399
|
projectedContent: any;
|
|
361
400
|
avatarClick: EventEmitter<void>;
|
|
362
401
|
sizeClass: any;
|
|
402
|
+
get isSubType(): boolean;
|
|
363
403
|
get classes(): string;
|
|
364
404
|
get userClass(): string;
|
|
365
405
|
/** Generate HTML string */
|
|
366
406
|
getHtmlString(): any;
|
|
407
|
+
private attr;
|
|
367
408
|
get initials(): string;
|
|
368
409
|
getInitialName(name: any): string;
|
|
369
410
|
constructor(el: ElementRef);
|
|
@@ -389,7 +430,7 @@ declare class MsAvatar {
|
|
|
389
430
|
clickOutside(event: Event): void;
|
|
390
431
|
toggleExpand(): void;
|
|
391
432
|
static ɵfac: i0.ɵɵFactoryDeclaration<MsAvatar, never>;
|
|
392
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MsAvatar, "ms-avatar", never, { "color": { "alias": "color"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "img": { "alias": "img"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "isStatusShow": { "alias": "isStatusShow"; "required": false; }; "
|
|
433
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MsAvatar, "ms-avatar", never, { "color": { "alias": "color"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "img": { "alias": "img"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "isStatusShow": { "alias": "isStatusShow"; "required": false; }; "subType": { "alias": "subType"; "required": false; }; "label": { "alias": "label"; "required": false; }; "label2": { "alias": "label2"; "required": false; }; "status": { "alias": "status"; "required": false; }; "max": { "alias": "max"; "required": false; }; "avatars": { "alias": "avatars"; "required": false; }; "block": { "alias": "block"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "htmlChange": "htmlChange"; "click": "click"; "avatarClick": "avatarClick"; }, ["projectedContent"], never, true, never>;
|
|
393
434
|
}
|
|
394
435
|
|
|
395
436
|
declare class MsPagination {
|
|
@@ -457,17 +498,83 @@ declare class MsSpinner {
|
|
|
457
498
|
static ɵcmp: i0.ɵɵComponentDeclaration<MsSpinner, "ms-spinner", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "htmlChange": "htmlChange"; }, never, never, true, never>;
|
|
458
499
|
}
|
|
459
500
|
|
|
501
|
+
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
460
502
|
declare class MsTooltip {
|
|
503
|
+
text: string;
|
|
504
|
+
position: TooltipPosition;
|
|
505
|
+
bgColor: string;
|
|
506
|
+
showArrow: boolean;
|
|
507
|
+
get title(): string;
|
|
508
|
+
get paragraphLines(): string[];
|
|
461
509
|
static ɵfac: i0.ɵɵFactoryDeclaration<MsTooltip, never>;
|
|
462
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MsTooltip, "ms-tooltip", never, {}, {}, never, never, true, never>;
|
|
510
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MsTooltip, "ms-tooltip", never, { "text": { "alias": "text"; "required": false; }; "position": { "alias": "position"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "showArrow": { "alias": "showArrow"; "required": false; }; }, {}, never, never, true, never>;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
declare class MsFileUploader {
|
|
514
|
+
private cdr;
|
|
515
|
+
label: string;
|
|
516
|
+
required: boolean;
|
|
517
|
+
readonly: boolean;
|
|
518
|
+
disabled: boolean;
|
|
519
|
+
accept: string;
|
|
520
|
+
multiple: boolean;
|
|
521
|
+
maxFileSize: string;
|
|
522
|
+
variant: 'button' | 'dragdrop';
|
|
523
|
+
skeleton: boolean;
|
|
524
|
+
fileInput: ElementRef<HTMLInputElement>;
|
|
525
|
+
isDragOver: boolean;
|
|
526
|
+
selectedFiles: File[];
|
|
527
|
+
uploadedFiles: {
|
|
528
|
+
name: string;
|
|
529
|
+
size: string;
|
|
530
|
+
isLoading?: boolean;
|
|
531
|
+
isSuccess?: boolean;
|
|
532
|
+
}[];
|
|
533
|
+
hasInteracted: boolean;
|
|
534
|
+
showError: boolean;
|
|
535
|
+
isFocused: boolean;
|
|
536
|
+
constructor(cdr: ChangeDetectorRef);
|
|
537
|
+
ngOnInit(): void;
|
|
538
|
+
onDragOver(event: DragEvent): void;
|
|
539
|
+
onDragLeave(event: DragEvent): void;
|
|
540
|
+
onDropFiles(event: DragEvent): void;
|
|
541
|
+
onFileInputChange(event: any): void;
|
|
542
|
+
private handleFiles;
|
|
543
|
+
onFileUploadComplete(index: number): void;
|
|
544
|
+
private formatFileSize;
|
|
545
|
+
triggerFileInput(): void;
|
|
546
|
+
updateErrorState(): void;
|
|
547
|
+
onFocus(): void;
|
|
548
|
+
onBlur(): void;
|
|
549
|
+
removeFile(index: number): void;
|
|
550
|
+
getAcceptFormats(): string;
|
|
551
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MsFileUploader, never>;
|
|
552
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MsFileUploader, "ms-file-uploader", never, { "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; }, {}, never, never, true, never>;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
declare class MsTooltipDirective {
|
|
556
|
+
private el;
|
|
557
|
+
private vcr;
|
|
558
|
+
private cfr;
|
|
559
|
+
msTooltip: string;
|
|
560
|
+
position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
561
|
+
bgColor: string;
|
|
562
|
+
showArrow: boolean;
|
|
563
|
+
private tooltipRef;
|
|
564
|
+
constructor(el: ElementRef, vcr: ViewContainerRef, cfr: ComponentFactoryResolver);
|
|
565
|
+
onMouseEnter(): void;
|
|
566
|
+
onMouseLeave(): void;
|
|
567
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MsTooltipDirective, never>;
|
|
568
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MsTooltipDirective, "[msTooltip]", never, { "msTooltip": { "alias": "msTooltip"; "required": false; }; "position": { "alias": "position"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "showArrow": { "alias": "showArrow"; "required": false; }; }, {}, never, never, true, never>;
|
|
463
569
|
}
|
|
464
570
|
|
|
465
571
|
declare class MsDesignSystemModule {
|
|
466
572
|
static ɵfac: i0.ɵɵFactoryDeclaration<MsDesignSystemModule, never>;
|
|
467
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner], [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner]>;
|
|
573
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner, typeof MsFileUploader, typeof MsTooltipDirective], [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner, typeof MsFileUploader]>;
|
|
468
574
|
static ɵinj: i0.ɵɵInjectorDeclaration<MsDesignSystemModule>;
|
|
469
575
|
}
|
|
470
576
|
|
|
471
577
|
declare function provideMsDesignSystem(): EnvironmentProviders;
|
|
472
578
|
|
|
473
|
-
export { MS_SVG_PATH, MsAvatar, MsBadge, MsButton, MsCheckbox, MsDesignSystemModule, MsDropdown, MsInputField, MsPagination, MsRadioButton, MsSidebar, MsSpinner, MsTextArea, MsToggle, MsTooltip, provideMsDesignSystem };
|
|
579
|
+
export { MS_SVG_PATH, MsAvatar, MsBadge, MsButton, MsCheckbox, MsDesignSystemModule, MsDropdown, MsFileUploader, MsInputField, MsPagination, MsRadioButton, MsSidebar, MsSpinner, MsTextArea, MsToggle, MsTooltip, MsTooltipDirective, provideMsDesignSystem };
|
|
580
|
+
export type { TooltipPosition };
|