@seamapi/react 0.23.0 → 0.24.0
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/index.css +99 -0
- package/index.css.map +1 -1
- package/index.min.css +1 -1
- package/index.min.css.map +1 -1
- package/lib/icons/ExclamationCircle.d.ts +2 -0
- package/lib/icons/ExclamationCircle.js +5 -0
- package/lib/icons/ExclamationCircle.js.map +1 -0
- package/lib/icons/TriangleWarning.d.ts +2 -0
- package/lib/icons/TriangleWarning.js +5 -0
- package/lib/icons/TriangleWarning.js.map +1 -0
- package/lib/ui/AccessCodeTable/AccessCodeTable.js +24 -11
- package/lib/ui/AccessCodeTable/AccessCodeTable.js.map +1 -1
- package/lib/ui/Alert/Alert.d.ts +11 -0
- package/lib/ui/Alert/Alert.js +12 -0
- package/lib/ui/Alert/Alert.js.map +1 -0
- package/lib/ui/Alert/Alerts.d.ts +8 -0
- package/lib/ui/Alert/Alerts.js +8 -0
- package/lib/ui/Alert/Alerts.js.map +1 -0
- package/lib/ui/DeviceDetails/DeviceDetails.js +23 -1
- package/lib/ui/DeviceDetails/DeviceDetails.js.map +1 -1
- package/lib/ui/DeviceTable/DeviceTable.js +13 -4
- package/lib/ui/DeviceTable/DeviceTable.js.map +1 -1
- package/lib/ui/SupportedDevices/SupportedDevices.d.ts +1 -1
- package/lib/ui/SupportedDevices/SupportedDevices.js +1 -1
- package/lib/ui/SupportedDevices/SupportedDevices.js.map +1 -1
- package/lib/ui/Table/EmptyPlaceholder.d.ts +2 -0
- package/lib/ui/Table/EmptyPlaceholder.js +5 -0
- package/lib/ui/Table/EmptyPlaceholder.js.map +1 -0
- package/lib/ui/index.d.ts +1 -0
- package/lib/ui/index.js +1 -0
- package/lib/ui/index.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/icons/ExclamationCircle.tsx +32 -0
- package/src/lib/icons/TriangleWarning.tsx +32 -0
- package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx +73 -40
- package/src/lib/ui/Alert/Alert.tsx +52 -0
- package/src/lib/ui/Alert/Alerts.tsx +22 -0
- package/src/lib/ui/DeviceDetails/DeviceDetails.tsx +37 -0
- package/src/lib/ui/DeviceTable/DeviceTable.tsx +28 -9
- package/src/lib/ui/SupportedDevices/SupportedDevices.tsx +1 -1
- package/src/lib/ui/Table/EmptyPlaceholder.tsx +12 -0
- package/src/lib/ui/index.ts +1 -0
- package/src/styles/_alert.scss +115 -0
- package/src/styles/_main.scss +2 -0
- package/src/styles/_tables.scss +12 -0
package/index.css
CHANGED
|
@@ -155,6 +155,14 @@
|
|
|
155
155
|
align-items: center;
|
|
156
156
|
padding: 4px;
|
|
157
157
|
}
|
|
158
|
+
.seam-components .seam-table-empty-placeholder {
|
|
159
|
+
height: 300px;
|
|
160
|
+
font-size: 18px;
|
|
161
|
+
line-height: 132%;
|
|
162
|
+
display: flex;
|
|
163
|
+
align-items: center;
|
|
164
|
+
justify-content: center;
|
|
165
|
+
}
|
|
158
166
|
.seam-components .seam-text-field {
|
|
159
167
|
padding: 0 8px;
|
|
160
168
|
height: 40px;
|
|
@@ -622,6 +630,97 @@
|
|
|
622
630
|
.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times > div:first-child {
|
|
623
631
|
flex: 0 1 160px;
|
|
624
632
|
}
|
|
633
|
+
.seam-components .seam-alerts {
|
|
634
|
+
width: 100%;
|
|
635
|
+
display: flex;
|
|
636
|
+
justify-content: flex-start;
|
|
637
|
+
align-items: flex-start;
|
|
638
|
+
flex-direction: column;
|
|
639
|
+
gap: 8px;
|
|
640
|
+
}
|
|
641
|
+
.seam-components .seam-alerts.seam-alerts-space-top {
|
|
642
|
+
margin-top: 16px;
|
|
643
|
+
}
|
|
644
|
+
.seam-components .seam-alert {
|
|
645
|
+
width: 100%;
|
|
646
|
+
min-height: 70px;
|
|
647
|
+
padding: 8px 16px;
|
|
648
|
+
border-radius: 8px;
|
|
649
|
+
display: flex;
|
|
650
|
+
justify-content: space-between;
|
|
651
|
+
align-items: center;
|
|
652
|
+
flex-direction: row;
|
|
653
|
+
gap: 16px;
|
|
654
|
+
}
|
|
655
|
+
.seam-components .seam-alert .seam-alert-action {
|
|
656
|
+
appearance: none;
|
|
657
|
+
height: 32px;
|
|
658
|
+
padding: 0 10px;
|
|
659
|
+
border-radius: 6px;
|
|
660
|
+
background-color: transparent;
|
|
661
|
+
font-size: 14px;
|
|
662
|
+
line-height: 1;
|
|
663
|
+
font-weight: 600;
|
|
664
|
+
white-space: nowrap;
|
|
665
|
+
cursor: pointer;
|
|
666
|
+
}
|
|
667
|
+
.seam-components .seam-alert .seam-alert-action:hover {
|
|
668
|
+
background-color: #f4f6f8;
|
|
669
|
+
}
|
|
670
|
+
.seam-components .seam-alert.seam-warning-alert {
|
|
671
|
+
background-color: #fff2e0;
|
|
672
|
+
border: 1px solid #f8d8be;
|
|
673
|
+
}
|
|
674
|
+
.seam-components .seam-alert.seam-warning-alert .seam-alert-action {
|
|
675
|
+
border: 1px solid #ca8852;
|
|
676
|
+
color: #ca8852;
|
|
677
|
+
}
|
|
678
|
+
.seam-components .seam-alert.seam-error-alert {
|
|
679
|
+
background-color: #ffefef;
|
|
680
|
+
border: 1px solid #f1d4d4;
|
|
681
|
+
}
|
|
682
|
+
.seam-components .seam-alert.seam-error-alert .seam-alert-action {
|
|
683
|
+
border: 1px solid #cb7d7d;
|
|
684
|
+
color: #cb7d7d;
|
|
685
|
+
}
|
|
686
|
+
.seam-components .seam-alert.seam-alert-space-top {
|
|
687
|
+
margin-top: 16px;
|
|
688
|
+
}
|
|
689
|
+
.seam-components .seam-alert .seam-alert-icon {
|
|
690
|
+
width: 24px;
|
|
691
|
+
height: 24px;
|
|
692
|
+
}
|
|
693
|
+
.seam-components .seam-alert .seam-alert-content {
|
|
694
|
+
display: flex;
|
|
695
|
+
justify-content: flex-start;
|
|
696
|
+
align-items: center;
|
|
697
|
+
flex-direction: row;
|
|
698
|
+
gap: 8px;
|
|
699
|
+
}
|
|
700
|
+
.seam-components .seam-alert .seam-alert-message-wrap .seam-alert-message {
|
|
701
|
+
font-size: 14px;
|
|
702
|
+
font-weight: 400;
|
|
703
|
+
line-height: 134%;
|
|
704
|
+
color: #232b3a;
|
|
705
|
+
}
|
|
706
|
+
@media only screen and (width <= 500px) {
|
|
707
|
+
.seam-components .seam-alert {
|
|
708
|
+
justify-content: flex-start;
|
|
709
|
+
flex-direction: column;
|
|
710
|
+
}
|
|
711
|
+
.seam-components .seam-alert .seam-alert-content {
|
|
712
|
+
width: 100%;
|
|
713
|
+
align-items: flex-start;
|
|
714
|
+
flex-direction: column;
|
|
715
|
+
gap: 4px;
|
|
716
|
+
}
|
|
717
|
+
.seam-components .seam-alert .seam-alert-action-wrap {
|
|
718
|
+
width: 100%;
|
|
719
|
+
}
|
|
720
|
+
.seam-components .seam-alert .seam-alert-action-wrap .seam-alert-action {
|
|
721
|
+
width: 100%;
|
|
722
|
+
}
|
|
723
|
+
}
|
|
625
724
|
.seam-components .seam-supported-devices-table-state-block {
|
|
626
725
|
width: 100%;
|
|
627
726
|
background-color: #f1f3f4;
|
package/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["src/styles/_reset.scss","src/styles/_main.scss","src/styles/_typography.scss","src/styles/_colors.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_icons.scss","src/styles/_menus.scss","src/styles/_device-details.scss","src/styles/_device-table.scss","src/styles/_access-code-table.scss","src/styles/_access-code-details.scss","src/styles/_supported-devices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["src/styles/_reset.scss","src/styles/_main.scss","src/styles/_typography.scss","src/styles/_colors.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_icons.scss","src/styles/_menus.scss","src/styles/_device-details.scss","src/styles/_device-table.scss","src/styles/_access-code-table.scss","src/styles/_access-code-details.scss","src/styles/_alert.scss","src/styles/_supported-devices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACgBA;ECbE;;AFGA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAmDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AEtGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAKF;EACE,OCTU;;ADcZ;EACE,OCPS;;ADYX;EACE,OCvBW;;ACPb;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAMJ;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;ACrDF;EACE;EACA;EACA;EACA;;AC2GF;EJ/GA;EIoHE;EACA;;AAjFF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE,YH7DM;EG8DN;EACA;;AAEA;EACE,YH5DS;EG6DT,cH7DS;;AGgEX;EAEE,YHjEQ;EGkER,cHlEQ;;AGsEZ;EACE,OH9EM;EG+EN;EACA;;AAEA;EACE,YH9EM;;AGiFR;EAEE;EACA,OHxFO;;AG4FX;EACE,OHrFU;EGsFV;;AAEA;EACE,YHjFC;EGkFD,cHxFU;;AG2FZ;EAEE,OH7FU;EG8FV,cH7FQ;EG8FR;;AAcF;EAEE;;AAxHJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAMJ;EACE,OHlBM;EGmBN;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AC9BJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,OJXQ;;AKPV;EACE,MLMQ;;AMRZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YNHQ;;AMQd;EACE;EACA;EACA;EACA;EACA;EACA;;ACvCA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,YPIE;;AOAN;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA,OPnCE;;AOsCJ;EACE;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA,YP1CD;;AO4CC;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE,OPtEA;EOuEA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OP7FF;;AOgGA;EACE,OPlGF;;AOqGA;EACE;EACA;;AAGF;EACE;EACA;;AAOV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;;AClJJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,ORvBE;EQwBF;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,ORjCE;EQkCF;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AClDZ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OTrBI;;ASuBJ;EACE;EACA,OTtBE;;AS2BR;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;;ACnDF;EACE,YVcC;EUbD;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA,OVLI;EUMJ;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE,OV5BI;EU6BJ;EACA;;AAEA;EACE;EACA,OVnCG;;AUwCT;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE,OV3FA;;AU+FA;EACE;;AAGF;EACE;;AC5Gd;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBXbQ;;AWiBZ;EACE,kBXnBY;EWoBZ;;AAEA;EACE;EACA,OX1BU;;AW8Bd;EACE,kBXhCa;EWiCb;;AAEA;EACE;EACA,OXvCW;;AW2Cf;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA,OX9EO;;AWmFb;EACE;IACE;IACA;;EAEA;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAEA;IACE;;;ACxGR;EACE;EACA,kBZYG;EYXH;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA,YZZC;EYaD;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;;AAGF;EACE;;AAMF;AAAA;EAEE,cA3DM;;AA8DR;AAAA;EAEE,eAhEM;;AAoEV;EACE;EACA;EACA;EACA,kBZpDS;;AYsDT;EACE;EACA;EACA;EACA;;AAGF;EACE,kBZ9DO;;AYiET;EACE,kBZnEQ;;AYsEV;EACE,kBZxEK;;AY2EP;EACE,kBZ9FE;;AYiGJ;EACE,kBZpFD","file":"index.css"}
|
package/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.seam-components{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}.seam-components *,.seam-components *::before,.seam-components *::after{box-sizing:border-box}.seam-components html,.seam-components body,.seam-components div,.seam-components span,.seam-components object,.seam-components iframe,.seam-components figure,.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6,.seam-components p,.seam-components blockquote,.seam-components pre,.seam-components a,.seam-components code,.seam-components em,.seam-components img,.seam-components small,.seam-components strike,.seam-components strong,.seam-components sub,.seam-components sup,.seam-components tt,.seam-components b,.seam-components u,.seam-components i,.seam-components ol,.seam-components ul,.seam-components li,.seam-components fieldset,.seam-components form,.seam-components label,.seam-components table,.seam-components caption,.seam-components tbody,.seam-components tfoot,.seam-components thead,.seam-components tr,.seam-components th,.seam-components td,.seam-components main,.seam-components canvas,.seam-components embed,.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components main{display:block}.seam-components body{line-height:1}.seam-components ol,.seam-components ul{list-style:none}.seam-components blockquote,.seam-components q{quotes:none}.seam-components blockquote::before,.seam-components blockquote::after,.seam-components q::before,.seam-components q::after{content:"";content:none}.seam-components table{border-collapse:collapse;border-spacing:0}.seam-components input{appearance:none;border-radius:0}.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6{font-weight:600}.seam-components .seam-caption{color:#9da1a9}.seam-components .seam-text-danger{color:#e36857}.seam-components html{color:#232b3a}.seam-components .seam-table-header{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 16px}.seam-components .seam-table-title{font-size:21px;line-height:132%}.seam-components .seam-table-title .seam-caption{font-size:16px;line-height:134%}.seam-components .seam-table-row{display:flex;padding:4px;height:72px;border-bottom:1px solid #eee}.seam-components .seam-table-row:hover{background:#f4f6f8}.seam-components .seam-table-row .seam-title{font-weight:600;font-size:18px;line-height:132%}.seam-components .seam-table-cell{display:flex;align-items:center;padding:4px}.seam-components .seam-text-field{padding:0 8px;height:40px;border:1px solid #d5d8dc;border-radius:8px}.seam-components .seam-btn{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-weight:600;cursor:pointer}.seam-components .seam-btn.seam-btn-small{font-size:14px;line-height:22px;border-radius:6px;padding:4px 10px}.seam-components .seam-btn.seam-btn-medium{font-size:16px;line-height:26px;border-radius:7px;padding:6px 16px}.seam-components .seam-btn.seam-btn-large{font-size:19px;line-height:30px;border-radius:8px;padding:8px 22px}.seam-components .seam-btn.seam-btn-solid{background:#007afc;color:#fff;border:1px solid #007afc}.seam-components .seam-btn.seam-btn-solid:hover{background:#006ee3;border-color:#006ee3}.seam-components .seam-btn.seam-btn-solid.seam-btn-disabled,.seam-components .seam-btn.seam-btn-solid:disabled{background:#c1dfff;border-color:#c1dfff}.seam-components .seam-btn.seam-btn-outline{color:#007afc;border:1px solid #7ebcff;background:rgba(0,0,0,0)}.seam-components .seam-btn.seam-btn-outline:hover{background:#f2f8ff}.seam-components .seam-btn.seam-btn-outline.seam-btn-disabled,.seam-components .seam-btn.seam-btn-outline:disabled{background:rgba(0,0,0,0);color:#7ebcff}.seam-components .seam-btn.seam-btn-neutral{color:#6e7179;border:1px solid #b9bec5}.seam-components .seam-btn.seam-btn-neutral:hover{background:#f1f3f4;border-color:#b9bec5}.seam-components .seam-btn.seam-btn-neutral.seam-btn-disabled,.seam-components .seam-btn.seam-btn-neutral:disabled{color:#b9bec5;border-color:#d5d8dc;background:#fff}.seam-components .seam-btn.seam-btn-disabled,.seam-components .seam-btn:disabled{cursor:not-allowed}.seam-components .seam-icon-btn{border-radius:6px;border:1px solid rgba(0,122,252,.5);cursor:pointer;background:#fff;padding:6px;line-height:0}.seam-components .seam-icon-btn:hover{background:rgba(0,122,252,.08)}.seam-components .seam-text-btn{color:#007afc;padding:0;cursor:pointer;background:rgba(0,0,0,0);border:0}.seam-components .seam-text-btn:hover{text-decoration:underline}.seam-components .seam-text-btn.seam-btn-disabled,.seam-components .seam-text-btn:disabled{cursor:not-allowed;text-decoration:none}.seam-components .seam-content-header{height:56px;display:flex;align-items:center;position:relative;justify-content:center;margin:0 16px}.seam-components .seam-content-header .seam-back-icon{position:absolute;top:50%;transform:translate(4px, -25%);left:0;cursor:pointer}.seam-components .seam-content-header .seam-title{font-size:16px;line-height:134%;color:#6e7179}.seam-components .seam-lock-icon *{fill:#6e7179}.seam-components .seam-menu-bg{width:100vw;height:100vh;justify-content:center;align-items:center;position:fixed;inset:0;z-index:999999;display:none}.seam-components .seam-menu-content{width:250px;position:absolute;padding:8px 0;background:#fff;box-shadow:0 0 1px rgba(0,0,0,.3),0 2px 16px 2px rgba(15,22,28,.15);border-radius:8px}.seam-components .seam-menu-content .seam-menu-item{padding:0 16px;height:36px;display:flex;align-items:center;font-size:16px;line-height:134%;cursor:pointer}.seam-components .seam-menu-content .seam-menu-item:hover{background:#f4f6f8}.seam-components .seam-menu-shadow{z-index:-1;opacity:0;visibility:hidden;top:0;right:0;position:fixed}.seam-components .seam-device-details .seam-body{display:flex;flex-direction:column;gap:16px;margin:0 24px 24px}.seam-components .seam-device-details .seam-body .seam-box{border:1px solid #d5d8dc;border-radius:8px}.seam-components .seam-device-details .seam-body .seam-box .seam-content{padding:12px 12px 12px 16px}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes{padding:12px 8px 12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes:hover{background:#f4f6f8}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-code-length{border-top:1px solid #d5d8dc}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-lock-status{display:flex;justify-content:space-between}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-lock-status>.seam-right{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-label{font-size:14px;line-height:134%;color:#6e7179}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-value{display:block;font-weight:600;font-size:16px;line-height:134%}.seam-components .seam-device-details .seam-body .seam-summary{padding:24px 16px;border-radius:16px;background:#f1f3f4}.seam-components .seam-device-details .seam-body .seam-summary .seam-content{display:flex;align-items:center;gap:20px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image{width:100px;height:100px;display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img{max-width:100%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info>.seam-label{color:#6e7179;font-weight:600;font-size:14px;line-height:134%;margin-bottom:4px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name{margin-bottom:16px;font-weight:600;font-size:21px;line-height:132%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:1fr;font-size:14px;line-height:134%;row-gap:4px;column-gap:28px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-label{color:#9da1a9}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-status-text{color:#6e7179}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties svg{scale:.75;margin-right:8px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties>*{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-icon-cell{flex:0;margin-left:8px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-name-cell{flex:1}.seam-components .seam-device-details .seam-body .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-table .seam-table-row{cursor:pointer}.seam-components .seam-device-table .seam-table-row .seam-image-cell{width:64px;height:64px;padding:4px}.seam-components .seam-device-table .seam-table-row .seam-image-cell img{width:100%}.seam-components .seam-device-table .seam-table-row .seam-body-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom{display:flex;justify-content:space-between;align-items:center;width:100%}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-model{font-weight:400;font-size:14px;line-height:134%;color:#6e7179;flex:0 1 190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses{display:flex;align-items:center;color:#6e7179;font-size:14px;line-height:134%}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses>div{display:flex;align-items:center;margin-right:16px}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses>div svg{scale:.75}.seam-components .seam-access-code-table .seam-table-row{cursor:pointer}.seam-components .seam-access-code-table .seam-table-row .seam-icon-cell{flex:0;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-table-row .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell .seam-code-details{font-size:14px;line-height:134%;color:#6e7179}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell .seam-code-details .seam-dot-divider{margin:0 4px;color:#d5d8dc}.seam-components .seam-access-code-table .seam-table-row .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table-action-menu .menu-item-copy{display:flex;align-items:center;justify-content:space-between;flex:1}.seam-components .seam-access-code-details>.seam-summary{background:#f1f3f4;border-radius:16px;margin:0 24px 16px}.seam-components .seam-access-code-details>.seam-summary>.seam-top{padding:24px 16px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-label{font-weight:600;font-size:14px;line-height:134%;color:#6e7179;margin-bottom:4px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-access-code-name{font-weight:600;font-size:21px;line-height:132%;margin-bottom:8px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-code{background:#fff;border:1px solid #9da1a9;border-radius:8px;padding:10px 16px;font-weight:600;font-size:24px;line-height:134%;margin-bottom:8px}.seam-components .seam-access-code-details>.seam-summary>.seam-top .seam-duration{color:#6e7179;font-size:14px;line-height:134%}.seam-components .seam-access-code-details>.seam-summary>.seam-top .seam-duration .seam-label{font-weight:600;color:#232b3a}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device{border-top:1px solid #dde0e2;padding:8px 16px 8px 8px;display:flex;align-items:center}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-device-image{width:72px;height:72px;margin-right:16px}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-device-image img{width:100%;max-height:100%}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-body{flex:1;font-weight:400;font-size:14px;line-height:134%;margin-right:8px}.seam-components .seam-access-code-details .seam-details{font-size:16px;line-height:134%;border-bottom:1px solid rgba(0,0,0,.12);padding:0 24px}.seam-components .seam-access-code-details .seam-details .seam-row{padding:16px;display:flex;border-top:1px solid rgba(0,0,0,.12)}.seam-components .seam-access-code-details .seam-details .seam-row .seam-heading{width:112px}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content{display:flex;flex:1}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times{display:flex;flex:1;font-size:16px;line-height:134%}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times .seam-label{color:#9da1a9}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times>div div{margin-bottom:4px}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times>div:first-child{flex:0 1 160px}.seam-components .seam-supported-devices-table-state-block{width:100%;background-color:#f1f3f4;padding:32px 8px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8px}.seam-components .seam-supported-devices-table{width:100%;overflow-x:auto;table-layout:auto;border-collapse:collapse}.seam-components .seam-supported-devices-table th,.seam-components .seam-supported-devices-table td{white-space:nowrap;padding:0 8px}.seam-components .seam-supported-devices-table thead{width:100%;height:50px;background:#f1f3f4;overflow:hidden}.seam-components .seam-supported-devices-table thead tr{border-radius:8px}.seam-components .seam-supported-devices-table thead th{vertical-align:middle;text-align:left;font-size:16px;font-weight:600}.seam-components .seam-supported-devices-table tbody tr{height:60px;border-bottom:1px solid #e9edef}.seam-components .seam-supported-devices-table tbody td{vertical-align:middle}.seam-components .seam-supported-devices-table tr th:first-of-type,.seam-components .seam-supported-devices-table tr td:first-of-type{padding-left:8px}.seam-components .seam-supported-devices-table tr th:last-of-type,.seam-components .seam-supported-devices-table tr td:last-of-type{padding-right:8px}.seam-components .seam-supported-devices-table .seam-status-pill{display:inline-flex;padding:4px 8px;border-radius:90px;background-color:#27ae60}.seam-components .seam-supported-devices-table .seam-status-pill span{color:#fff;font-size:14px;font-weight:600;line-height:1}.seam-components .seam-supported-devices-table .seam-status-pill.status-green{background-color:#27ae60}.seam-components .seam-supported-devices-table .seam-status-pill.status-orange{background-color:#f3980f}.seam-components .seam-supported-devices-table .seam-status-pill.status-red{background-color:#e36857}.seam-components .seam-supported-devices-table .seam-status-pill.status-blue{background-color:#007afc}.seam-components .seam-supported-devices-table .seam-status-pill.status-gray{background-color:#cbd0d3}/*# sourceMappingURL=index.min.css.map */
|
|
1
|
+
.seam-components{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}.seam-components *,.seam-components *::before,.seam-components *::after{box-sizing:border-box}.seam-components html,.seam-components body,.seam-components div,.seam-components span,.seam-components object,.seam-components iframe,.seam-components figure,.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6,.seam-components p,.seam-components blockquote,.seam-components pre,.seam-components a,.seam-components code,.seam-components em,.seam-components img,.seam-components small,.seam-components strike,.seam-components strong,.seam-components sub,.seam-components sup,.seam-components tt,.seam-components b,.seam-components u,.seam-components i,.seam-components ol,.seam-components ul,.seam-components li,.seam-components fieldset,.seam-components form,.seam-components label,.seam-components table,.seam-components caption,.seam-components tbody,.seam-components tfoot,.seam-components thead,.seam-components tr,.seam-components th,.seam-components td,.seam-components main,.seam-components canvas,.seam-components embed,.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components main{display:block}.seam-components body{line-height:1}.seam-components ol,.seam-components ul{list-style:none}.seam-components blockquote,.seam-components q{quotes:none}.seam-components blockquote::before,.seam-components blockquote::after,.seam-components q::before,.seam-components q::after{content:"";content:none}.seam-components table{border-collapse:collapse;border-spacing:0}.seam-components input{appearance:none;border-radius:0}.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6{font-weight:600}.seam-components .seam-caption{color:#9da1a9}.seam-components .seam-text-danger{color:#e36857}.seam-components html{color:#232b3a}.seam-components .seam-table-header{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 16px}.seam-components .seam-table-title{font-size:21px;line-height:132%}.seam-components .seam-table-title .seam-caption{font-size:16px;line-height:134%}.seam-components .seam-table-row{display:flex;padding:4px;height:72px;border-bottom:1px solid #eee}.seam-components .seam-table-row:hover{background:#f4f6f8}.seam-components .seam-table-row .seam-title{font-weight:600;font-size:18px;line-height:132%}.seam-components .seam-table-cell{display:flex;align-items:center;padding:4px}.seam-components .seam-table-empty-placeholder{height:300px;font-size:18px;line-height:132%;display:flex;align-items:center;justify-content:center}.seam-components .seam-text-field{padding:0 8px;height:40px;border:1px solid #d5d8dc;border-radius:8px}.seam-components .seam-btn{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-weight:600;cursor:pointer}.seam-components .seam-btn.seam-btn-small{font-size:14px;line-height:22px;border-radius:6px;padding:4px 10px}.seam-components .seam-btn.seam-btn-medium{font-size:16px;line-height:26px;border-radius:7px;padding:6px 16px}.seam-components .seam-btn.seam-btn-large{font-size:19px;line-height:30px;border-radius:8px;padding:8px 22px}.seam-components .seam-btn.seam-btn-solid{background:#007afc;color:#fff;border:1px solid #007afc}.seam-components .seam-btn.seam-btn-solid:hover{background:#006ee3;border-color:#006ee3}.seam-components .seam-btn.seam-btn-solid.seam-btn-disabled,.seam-components .seam-btn.seam-btn-solid:disabled{background:#c1dfff;border-color:#c1dfff}.seam-components .seam-btn.seam-btn-outline{color:#007afc;border:1px solid #7ebcff;background:rgba(0,0,0,0)}.seam-components .seam-btn.seam-btn-outline:hover{background:#f2f8ff}.seam-components .seam-btn.seam-btn-outline.seam-btn-disabled,.seam-components .seam-btn.seam-btn-outline:disabled{background:rgba(0,0,0,0);color:#7ebcff}.seam-components .seam-btn.seam-btn-neutral{color:#6e7179;border:1px solid #b9bec5}.seam-components .seam-btn.seam-btn-neutral:hover{background:#f1f3f4;border-color:#b9bec5}.seam-components .seam-btn.seam-btn-neutral.seam-btn-disabled,.seam-components .seam-btn.seam-btn-neutral:disabled{color:#b9bec5;border-color:#d5d8dc;background:#fff}.seam-components .seam-btn.seam-btn-disabled,.seam-components .seam-btn:disabled{cursor:not-allowed}.seam-components .seam-icon-btn{border-radius:6px;border:1px solid rgba(0,122,252,.5);cursor:pointer;background:#fff;padding:6px;line-height:0}.seam-components .seam-icon-btn:hover{background:rgba(0,122,252,.08)}.seam-components .seam-text-btn{color:#007afc;padding:0;cursor:pointer;background:rgba(0,0,0,0);border:0}.seam-components .seam-text-btn:hover{text-decoration:underline}.seam-components .seam-text-btn.seam-btn-disabled,.seam-components .seam-text-btn:disabled{cursor:not-allowed;text-decoration:none}.seam-components .seam-content-header{height:56px;display:flex;align-items:center;position:relative;justify-content:center;margin:0 16px}.seam-components .seam-content-header .seam-back-icon{position:absolute;top:50%;transform:translate(4px, -25%);left:0;cursor:pointer}.seam-components .seam-content-header .seam-title{font-size:16px;line-height:134%;color:#6e7179}.seam-components .seam-lock-icon *{fill:#6e7179}.seam-components .seam-menu-bg{width:100vw;height:100vh;justify-content:center;align-items:center;position:fixed;inset:0;z-index:999999;display:none}.seam-components .seam-menu-content{width:250px;position:absolute;padding:8px 0;background:#fff;box-shadow:0 0 1px rgba(0,0,0,.3),0 2px 16px 2px rgba(15,22,28,.15);border-radius:8px}.seam-components .seam-menu-content .seam-menu-item{padding:0 16px;height:36px;display:flex;align-items:center;font-size:16px;line-height:134%;cursor:pointer}.seam-components .seam-menu-content .seam-menu-item:hover{background:#f4f6f8}.seam-components .seam-menu-shadow{z-index:-1;opacity:0;visibility:hidden;top:0;right:0;position:fixed}.seam-components .seam-device-details .seam-body{display:flex;flex-direction:column;gap:16px;margin:0 24px 24px}.seam-components .seam-device-details .seam-body .seam-box{border:1px solid #d5d8dc;border-radius:8px}.seam-components .seam-device-details .seam-body .seam-box .seam-content{padding:12px 12px 12px 16px}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes{padding:12px 8px 12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes:hover{background:#f4f6f8}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-code-length{border-top:1px solid #d5d8dc}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-lock-status{display:flex;justify-content:space-between}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-lock-status>.seam-right{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-label{font-size:14px;line-height:134%;color:#6e7179}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-value{display:block;font-weight:600;font-size:16px;line-height:134%}.seam-components .seam-device-details .seam-body .seam-summary{padding:24px 16px;border-radius:16px;background:#f1f3f4}.seam-components .seam-device-details .seam-body .seam-summary .seam-content{display:flex;align-items:center;gap:20px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image{width:100px;height:100px;display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img{max-width:100%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info>.seam-label{color:#6e7179;font-weight:600;font-size:14px;line-height:134%;margin-bottom:4px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name{margin-bottom:16px;font-weight:600;font-size:21px;line-height:132%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:1fr;font-size:14px;line-height:134%;row-gap:4px;column-gap:28px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-label{color:#9da1a9}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-status-text{color:#6e7179}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties svg{scale:.75;margin-right:8px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties>*{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-icon-cell{flex:0;margin-left:8px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-name-cell{flex:1}.seam-components .seam-device-details .seam-body .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-table .seam-table-row{cursor:pointer}.seam-components .seam-device-table .seam-table-row .seam-image-cell{width:64px;height:64px;padding:4px}.seam-components .seam-device-table .seam-table-row .seam-image-cell img{width:100%}.seam-components .seam-device-table .seam-table-row .seam-body-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom{display:flex;justify-content:space-between;align-items:center;width:100%}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-model{font-weight:400;font-size:14px;line-height:134%;color:#6e7179;flex:0 1 190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses{display:flex;align-items:center;color:#6e7179;font-size:14px;line-height:134%}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses>div{display:flex;align-items:center;margin-right:16px}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses>div svg{scale:.75}.seam-components .seam-access-code-table .seam-table-row{cursor:pointer}.seam-components .seam-access-code-table .seam-table-row .seam-icon-cell{flex:0;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-table-row .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell .seam-code-details{font-size:14px;line-height:134%;color:#6e7179}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell .seam-code-details .seam-dot-divider{margin:0 4px;color:#d5d8dc}.seam-components .seam-access-code-table .seam-table-row .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table-action-menu .menu-item-copy{display:flex;align-items:center;justify-content:space-between;flex:1}.seam-components .seam-access-code-details>.seam-summary{background:#f1f3f4;border-radius:16px;margin:0 24px 16px}.seam-components .seam-access-code-details>.seam-summary>.seam-top{padding:24px 16px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-label{font-weight:600;font-size:14px;line-height:134%;color:#6e7179;margin-bottom:4px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-access-code-name{font-weight:600;font-size:21px;line-height:132%;margin-bottom:8px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-code{background:#fff;border:1px solid #9da1a9;border-radius:8px;padding:10px 16px;font-weight:600;font-size:24px;line-height:134%;margin-bottom:8px}.seam-components .seam-access-code-details>.seam-summary>.seam-top .seam-duration{color:#6e7179;font-size:14px;line-height:134%}.seam-components .seam-access-code-details>.seam-summary>.seam-top .seam-duration .seam-label{font-weight:600;color:#232b3a}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device{border-top:1px solid #dde0e2;padding:8px 16px 8px 8px;display:flex;align-items:center}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-device-image{width:72px;height:72px;margin-right:16px}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-device-image img{width:100%;max-height:100%}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-body{flex:1;font-weight:400;font-size:14px;line-height:134%;margin-right:8px}.seam-components .seam-access-code-details .seam-details{font-size:16px;line-height:134%;border-bottom:1px solid rgba(0,0,0,.12);padding:0 24px}.seam-components .seam-access-code-details .seam-details .seam-row{padding:16px;display:flex;border-top:1px solid rgba(0,0,0,.12)}.seam-components .seam-access-code-details .seam-details .seam-row .seam-heading{width:112px}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content{display:flex;flex:1}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times{display:flex;flex:1;font-size:16px;line-height:134%}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times .seam-label{color:#9da1a9}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times>div div{margin-bottom:4px}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times>div:first-child{flex:0 1 160px}.seam-components .seam-alerts{width:100%;display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:8px}.seam-components .seam-alerts.seam-alerts-space-top{margin-top:16px}.seam-components .seam-alert{width:100%;min-height:70px;padding:8px 16px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:16px}.seam-components .seam-alert .seam-alert-action{appearance:none;height:32px;padding:0 10px;border-radius:6px;background-color:rgba(0,0,0,0);font-size:14px;line-height:1;font-weight:600;white-space:nowrap;cursor:pointer}.seam-components .seam-alert .seam-alert-action:hover{background-color:#f4f6f8}.seam-components .seam-alert.seam-warning-alert{background-color:#fff2e0;border:1px solid #f8d8be}.seam-components .seam-alert.seam-warning-alert .seam-alert-action{border:1px solid #ca8852;color:#ca8852}.seam-components .seam-alert.seam-error-alert{background-color:#ffefef;border:1px solid #f1d4d4}.seam-components .seam-alert.seam-error-alert .seam-alert-action{border:1px solid #cb7d7d;color:#cb7d7d}.seam-components .seam-alert.seam-alert-space-top{margin-top:16px}.seam-components .seam-alert .seam-alert-icon{width:24px;height:24px}.seam-components .seam-alert .seam-alert-content{display:flex;justify-content:flex-start;align-items:center;flex-direction:row;gap:8px}.seam-components .seam-alert .seam-alert-message-wrap .seam-alert-message{font-size:14px;font-weight:400;line-height:134%;color:#232b3a}@media only screen and (width <= 500px){.seam-components .seam-alert{justify-content:flex-start;flex-direction:column}.seam-components .seam-alert .seam-alert-content{width:100%;align-items:flex-start;flex-direction:column;gap:4px}.seam-components .seam-alert .seam-alert-action-wrap{width:100%}.seam-components .seam-alert .seam-alert-action-wrap .seam-alert-action{width:100%}}.seam-components .seam-supported-devices-table-state-block{width:100%;background-color:#f1f3f4;padding:32px 8px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8px}.seam-components .seam-supported-devices-table{width:100%;overflow-x:auto;table-layout:auto;border-collapse:collapse}.seam-components .seam-supported-devices-table th,.seam-components .seam-supported-devices-table td{white-space:nowrap;padding:0 8px}.seam-components .seam-supported-devices-table thead{width:100%;height:50px;background:#f1f3f4;overflow:hidden}.seam-components .seam-supported-devices-table thead tr{border-radius:8px}.seam-components .seam-supported-devices-table thead th{vertical-align:middle;text-align:left;font-size:16px;font-weight:600}.seam-components .seam-supported-devices-table tbody tr{height:60px;border-bottom:1px solid #e9edef}.seam-components .seam-supported-devices-table tbody td{vertical-align:middle}.seam-components .seam-supported-devices-table tr th:first-of-type,.seam-components .seam-supported-devices-table tr td:first-of-type{padding-left:8px}.seam-components .seam-supported-devices-table tr th:last-of-type,.seam-components .seam-supported-devices-table tr td:last-of-type{padding-right:8px}.seam-components .seam-supported-devices-table .seam-status-pill{display:inline-flex;padding:4px 8px;border-radius:90px;background-color:#27ae60}.seam-components .seam-supported-devices-table .seam-status-pill span{color:#fff;font-size:14px;font-weight:600;line-height:1}.seam-components .seam-supported-devices-table .seam-status-pill.status-green{background-color:#27ae60}.seam-components .seam-supported-devices-table .seam-status-pill.status-orange{background-color:#f3980f}.seam-components .seam-supported-devices-table .seam-status-pill.status-red{background-color:#e36857}.seam-components .seam-supported-devices-table .seam-status-pill.status-blue{background-color:#007afc}.seam-components .seam-supported-devices-table .seam-status-pill.status-gray{background-color:#cbd0d3}/*# sourceMappingURL=index.min.css.map */
|
package/index.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_typography.scss","src/styles/_reset.scss","src/styles/_colors.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_icons.scss","src/styles/_menus.scss","src/styles/_device-details.scss","src/styles/_device-table.scss","src/styles/_access-code-table.scss","src/styles/_access-code-details.scss","src/styles/_supported-devices.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_typography.scss","src/styles/_reset.scss","src/styles/_colors.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_icons.scss","src/styles/_menus.scss","src/styles/_device-details.scss","src/styles/_device-table.scss","src/styles/_access-code-table.scss","src/styles/_access-code-details.scss","src/styles/_alert.scss","src/styles/_supported-devices.scss"],"names":[],"mappings":"AAgBA,iBCbE,2JCGA,wEAGE,sBAGF,ylCAmDE,SACA,UACA,SACA,eACA,oBACA,wBACA,kCACA,mCACA,sBAGF,oHAKE,cAGF,sBACE,cAGF,wCAEE,gBAGF,+CAEE,YAGF,4HAIE,WACA,aAGF,uBACE,yBACA,iBAGF,uBACE,gBACA,gBDtGF,wHAME,gBAKF,+BACE,METU,QFcZ,mCACE,MEPS,QFYX,sBACE,MEvBW,QCPb,oCACE,aACA,8BACA,mBACA,YACA,eAGF,mCACE,eACA,iBAEA,iDACE,eACA,iBAMJ,iCACE,aACA,YACA,YACA,6BAEA,uCACE,mBAGF,6CACE,gBACA,eACA,iBAMJ,kCACE,aACA,mBACA,YAKF,+CACE,aACA,eACA,iBACA,aACA,mBACA,uBCrDF,kCACE,cACA,YACA,yBACA,kBC2GF,2BL/GA,2JKoHE,gBACA,eAjFF,0CACE,eACA,iBACA,kBACA,iBAGF,2CACE,eACA,iBACA,kBACA,iBAGF,0CACE,eACA,iBACA,kBACA,iBAKF,0CACE,WH7DM,QG8DN,WACA,yBAEA,gDACE,WH5DS,QG6DT,aH7DS,QGgEX,+GAEE,WHjEQ,QGkER,aHlEQ,QGsEZ,4CACE,MH9EM,QG+EN,yBACA,yBAEA,kDACE,WH9EM,QGiFR,mHAEE,yBACA,MHxFO,QG4FX,4CACE,MHrFU,QGsFV,yBAEA,kDACE,WHjFC,QGkFD,aHxFU,QG2FZ,mHAEE,MH7FU,QG8FV,aH7FQ,QG8FR,gBAcF,iFAEE,mBAxHJ,gCACE,kBACA,oCACA,eACA,gBACA,YACA,cAEA,sCACE,+BAMJ,gCACE,MHlBM,QGmBN,UACA,eACA,yBACA,SAEA,sCACE,0BAGF,2FAEE,mBACA,qBC9BJ,sCACE,YACA,aACA,mBACA,kBACA,uBACA,cAEA,sDACE,kBACA,QACA,+BACA,OACA,eAGF,kDACE,eACA,iBACA,MJXQ,QKPV,mCACE,KLMQ,QMRZ,+BACE,YACA,aACA,uBACA,mBACA,eACA,QACA,eACA,aAGF,oCACE,YACA,kBACA,cACA,gBACA,oEACA,kBAEA,oDACE,eACA,YACA,aACA,mBACA,eACA,iBACA,eAEA,0DACE,WNHQ,QMQd,mCACE,WACA,UACA,kBACA,MACA,QACA,eCvCA,iDACE,aACA,sBACA,SACA,mBAEA,2DACE,yBACA,kBAEA,yEACE,4BAEA,2FACE,2BACA,aACA,mBACA,8BACA,eAEA,iGACE,WPIE,yGOCJ,6BAGF,0FACE,aACA,8BAEA,sGACE,aACA,mBAIJ,qFACE,eACA,iBACA,MPnCE,QOsCJ,qFACE,cACA,gBACA,eACA,iBAKN,+DACE,kBACA,mBACA,WP1CD,QO4CC,6EACE,aACA,mBACA,SAEA,yFACE,YACA,aACA,aACA,mBAEA,6FACE,eAKF,oGACE,MPtEA,QOuEA,gBACA,eACA,iBACA,kBAGF,0GACE,mBACA,gBACA,eACA,iBAGF,yGACE,aACA,sCACA,mBACA,eACA,iBACA,YACA,gBAEA,qHACE,MP7FF,QOgGA,2HACE,MPlGF,QOqGA,6GACE,UACA,iBAGF,2GACE,aACA,mBAOV,iEACE,OACA,gBACA,aACA,mBACA,uBAEA,qEACE,WACA,YACA,aACA,mBACA,uBAIJ,iEACE,OAGF,mEACE,kBACA,aACA,mBACA,uBClJJ,oDACE,eAEA,qEACE,WACA,YACA,YAEA,yEACE,WAIJ,oEACE,OACA,sBACA,uBACA,uBACA,QAEA,iFACE,aACA,8BACA,mBACA,WAEA,oGACE,gBACA,eACA,iBACA,MRvBE,QQwBF,eACA,mBACA,gBACA,uBAGF,uGACE,aACA,mBACA,MRjCE,QQkCF,eACA,iBAEA,2GACE,aACA,mBACA,kBAEA,+GACE,UClDZ,yDACE,eAEA,yEACE,OACA,aACA,mBACA,uBAEA,6EACE,WACA,YACA,aACA,mBACA,uBAIJ,yEACE,OACA,sBACA,uBACA,uBACA,QAEA,4FACE,eACA,iBACA,MTrBI,QSuBJ,8GACE,aACA,MTtBE,QS2BR,2EACE,kBACA,aACA,mBACA,uBAMJ,qEACE,aACA,mBACA,8BACA,OCnDF,yDACE,WVcC,QUbD,mBACA,mBAEA,mEACE,kBAEA,+EACE,gBACA,eACA,iBACA,MVLI,QUMJ,kBAGF,0FACE,gBACA,eACA,iBACA,kBAGF,8EACE,gBACA,yBACA,kBACA,kBACA,gBACA,eACA,iBACA,kBAGF,kFACE,MV5BI,QU6BJ,eACA,iBAEA,8FACE,gBACA,MVnCG,QUwCT,kFACE,6BACA,yBACA,aACA,mBAEA,qGACE,WACA,YACA,kBAEA,yGACE,WACA,gBAIJ,6FACE,OACA,gBACA,eACA,iBACA,iBAKN,yDACE,eACA,iBACA,wCACA,eAEA,mEACE,aACA,aACA,qCAEA,iFACE,YAGF,iFACE,aACA,OAEA,6FACE,aACA,OACA,eACA,iBAEA,yGACE,MV3FA,QU+FA,qGACE,kBAGF,6GACE,eC5Gd,8BACE,WACA,aACA,2BACA,uBACA,sBACA,QAEA,oDACE,gBAKJ,6BACE,WACA,gBACA,iBACA,kBACA,aACA,8BACA,mBACA,mBACA,SAEA,gDACE,gBACA,YACA,eACA,kBACA,+BACA,eACA,cACA,gBACA,mBACA,eAEA,sDACE,iBXbQ,QWiBZ,gDACE,iBXnBY,QWoBZ,yBAEA,mEACE,yBACA,MX1BU,QW8Bd,8CACE,iBXhCa,QWiCb,yBAEA,iEACE,yBACA,MXvCW,QW2Cf,kDACE,gBAGF,8CACE,WACA,YAGF,iDACE,aACA,2BACA,mBACA,mBACA,QAIA,0EACE,eACA,gBACA,iBACA,MX9EO,QWmFb,wCACE,6BACE,2BACA,sBAEA,iDACE,WACA,uBACA,sBACA,QAGF,qDACE,WAEA,wEACE,YCxGR,2DACE,WACA,iBZYG,QYXH,iBACA,aACA,uBACA,mBACA,sBACA,QAGF,+CACE,WACA,gBACA,kBACA,yBAEA,oGAEE,mBACA,cAGF,qDACE,WACA,YACA,WZZC,QYaD,gBAEA,wDACE,kBAGF,wDACE,sBACA,gBACA,eACA,gBAKF,wDACE,YACA,gCAGF,wDACE,sBAMF,sIAEE,aA3DM,IA8DR,oIAEE,cAhEM,IAoEV,iEACE,oBACA,gBACA,mBACA,iBZpDS,QYsDT,sEACE,WACA,eACA,gBACA,cAGF,8EACE,iBZ9DO,QYiET,+EACE,iBZnEQ,QYsEV,4EACE,iBZxEK,QY2EP,6EACE,iBZ9FE,QYiGJ,6EACE,iBZpFD","file":"index.min.css"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const ExclamationCircleIcon = (props) => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'none', ...props, children: [_jsx("mask", { id: 'exclamation-circle_svg__a', width: 24, height: 24, x: 0, y: 0, maskUnits: 'userSpaceOnUse', style: {
|
|
3
|
+
maskType: 'alpha',
|
|
4
|
+
}, children: _jsx("path", { fill: '#D9D9D9', d: 'M0 0h24v24H0z' }) }), _jsx("g", { mask: 'url(#exclamation-circle_svg__a)', children: _jsx("path", { fill: '#E36857', d: 'M12 17a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 16c0 .283.096.52.288.712A.965.965 0 0 0 12 17Zm-1-4h2V7h-2v6Zm1 9a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2c1.383 0 2.683.262 3.9.787a10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Z' }) })] }));
|
|
5
|
+
//# sourceMappingURL=ExclamationCircle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExclamationCircle.js","sourceRoot":"","sources":["../../src/lib/icons/ExclamationCircle.tsx"],"names":[],"mappings":";AACA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,KAA8B,EACjB,EAAE,CAAC,CAChB,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,MAAM,KACP,KAAK,aAET,eACE,EAAE,EAAC,2BAA2B,EAC9B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB,YAED,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,eAAe,GAAG,GACpC,EACP,YAAG,IAAI,EAAC,iCAAiC,YACvC,eACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,6oBAA6oB,GAC/oB,GACA,IACA,CACP,CAAA"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const TriangleWarningIcon = (props) => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, fill: 'none', ...props, children: [_jsx("mask", { id: 'triangle-warning_svg__a', width: 24, height: 24, x: 0, y: 0, maskUnits: 'userSpaceOnUse', style: {
|
|
3
|
+
maskType: 'alpha',
|
|
4
|
+
}, children: _jsx("path", { fill: '#D9D9D9', d: 'M0 0h24v24H0z' }) }), _jsx("g", { mask: 'url(#triangle-warning_svg__a)', children: _jsx("path", { fill: '#F3980F', d: 'M1 21 12 2l11 19H1Zm11-3a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 17a.967.967 0 0 0-.287-.712A.968.968 0 0 0 12 16a.965.965 0 0 0-.712.288A.965.965 0 0 0 11 17c0 .283.096.52.288.712A.965.965 0 0 0 12 18Zm-1-3h2v-5h-2v5Z' }) })] }));
|
|
5
|
+
//# sourceMappingURL=TriangleWarning.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TriangleWarning.js","sourceRoot":"","sources":["../../src/lib/icons/TriangleWarning.tsx"],"names":[],"mappings":";AACA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,KAA8B,EACjB,EAAE,CAAC,CAChB,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,MAAM,KACP,KAAK,aAET,eACE,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB,YAED,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,eAAe,GAAG,GACpC,EACP,YAAG,IAAI,EAAC,+BAA+B,YACrC,eACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,+NAA+N,GACjO,GACA,IACA,CACP,CAAA"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { copy } from '../../../lib/copy.js';
|
|
4
4
|
import { AccessCodeKeyIcon } from '../../../lib/icons/AccessCodeKey.js';
|
|
5
5
|
import { CopyIcon } from '../../../lib/icons/Copy.js';
|
|
6
|
-
import { useAccessCodes } from '../../../lib/seam/access-codes/use-access-codes.js';
|
|
6
|
+
import { useAccessCodes, } from '../../../lib/seam/access-codes/use-access-codes.js';
|
|
7
7
|
import { AccessCodeDetails } from '../../../lib/ui/AccessCodeDetails/AccessCodeDetails.js';
|
|
8
8
|
import { CodeDetails } from '../../../lib/ui/AccessCodeTable/CodeDetails.js';
|
|
9
9
|
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
|
|
10
10
|
import { MenuItem } from '../../../lib/ui/Menu/MenuItem.js';
|
|
11
11
|
import { MoreActionsMenu } from '../../../lib/ui/Menu/MoreActionsMenu.js';
|
|
12
|
+
import { EmptyPlaceholder } from '../../../lib/ui/Table/EmptyPlaceholder.js';
|
|
12
13
|
import { TableBody } from '../../../lib/ui/Table/TableBody.js';
|
|
13
14
|
import { TableCell } from '../../../lib/ui/Table/TableCell.js';
|
|
14
15
|
import { TableHeader } from '../../../lib/ui/Table/TableHeader.js';
|
|
@@ -30,18 +31,30 @@ export function AccessCodeTable(props) {
|
|
|
30
31
|
if (accessCodes == null) {
|
|
31
32
|
return null;
|
|
32
33
|
}
|
|
33
|
-
return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
34
|
+
return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children: _jsx(Body, { accessCodes: accessCodes, selectAccessCode: selectAccessCode }) })] }));
|
|
35
|
+
}
|
|
36
|
+
function Body(props) {
|
|
37
|
+
const { accessCodes, selectAccessCode } = props;
|
|
38
|
+
if (accessCodes.length === 0) {
|
|
39
|
+
return _jsx(EmptyPlaceholder, { children: t.noAccessCodesMessage });
|
|
40
|
+
}
|
|
41
|
+
return (_jsx(_Fragment, { children: accessCodes.map((accessCode) => (_jsx(AccessCodeRow, { accessCode: accessCode, onClick: () => {
|
|
42
|
+
selectAccessCode(accessCode);
|
|
43
|
+
} }, accessCode.access_code_id))) }));
|
|
44
|
+
}
|
|
45
|
+
function AccessCodeRow(props) {
|
|
46
|
+
const { onClick, accessCode } = props;
|
|
47
|
+
return (_jsxs(TableRow, { onClick: onClick, children: [_jsx(TableCell, { className: 'seam-icon-cell', children: _jsx("div", { children: _jsx(AccessCodeKeyIcon, {}) }) }), _jsxs(TableCell, { className: 'seam-name-cell', children: [_jsx(Title, { children: accessCode.name }), _jsx(CodeDetails, { accessCode: accessCode })] }), _jsx(TableCell, { className: 'seam-action-cell', children: _jsx(MoreActionsMenu, { MenuProps: {
|
|
48
|
+
BackgroundProps: {
|
|
49
|
+
className: 'seam-access-code-table-action-menu',
|
|
50
|
+
},
|
|
51
|
+
}, children: _jsx(MenuItem, { onClick: () => {
|
|
52
|
+
void copy(accessCode.code ?? '');
|
|
53
|
+
}, children: _jsxs("div", { className: 'menu-item-copy', children: [_jsxs("span", { children: [t.copyCode, " - ", accessCode.code] }), _jsx(CopyIcon, {})] }) }) }) })] }, accessCode.access_code_id));
|
|
42
54
|
}
|
|
43
55
|
const t = {
|
|
44
56
|
accessCodes: 'Access Codes',
|
|
45
57
|
copyCode: 'Copy code',
|
|
58
|
+
noAccessCodesMessage: 'Sorry, no access codes were found',
|
|
46
59
|
};
|
|
47
60
|
//# sourceMappingURL=AccessCodeTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,
|
|
1
|
+
{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { MouseEventHandler } from 'react';
|
|
2
|
+
export interface AlertProps {
|
|
3
|
+
variant: 'warning' | 'error';
|
|
4
|
+
message: string;
|
|
5
|
+
action?: {
|
|
6
|
+
label: string;
|
|
7
|
+
onClick: MouseEventHandler;
|
|
8
|
+
};
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare function Alert(props: AlertProps): JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { ExclamationCircleIcon } from '../../../lib/icons/ExclamationCircle.js';
|
|
4
|
+
import { TriangleWarningIcon } from '../../../lib/icons/TriangleWarning.js';
|
|
5
|
+
export function Alert(props) {
|
|
6
|
+
const { variant, message, action, className, ...rest } = props;
|
|
7
|
+
const handleClick = (ev) => {
|
|
8
|
+
action?.onClick(ev);
|
|
9
|
+
};
|
|
10
|
+
return (_jsxs("div", { className: classNames('seam-alert', `seam-${variant}-alert`, className), ...rest, children: [_jsxs("div", { className: 'seam-alert-content', children: [_jsx("div", { className: 'seam-alert-icon', children: variant === 'warning' ? (_jsx(TriangleWarningIcon, {})) : (_jsx(ExclamationCircleIcon, {})) }), _jsx("div", { className: 'seam-alert-message-wrap', children: _jsx("p", { className: 'seam-alert-message', children: message }) })] }), action != null && (_jsx("div", { className: 'seam-alert-action-wrap', children: _jsx("button", { onClick: handleClick, className: 'seam-alert-action', children: action.label }) }))] }));
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=Alert.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/lib/ui/Alert/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAYlE,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAE9D,MAAM,WAAW,GAAyC,CAAC,EAAE,EAAE,EAAE;QAC/D,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,CAAA;IACrB,CAAC,CAAA;IAED,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,QAAQ,OAAO,QAAQ,EAAE,SAAS,CAAC,KACnE,IAAI,aAER,eAAK,SAAS,EAAC,oBAAoB,aACjC,cAAK,SAAS,EAAC,iBAAiB,YAC7B,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CACvB,KAAC,mBAAmB,KAAG,CACxB,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,KAAG,CAC1B,GACG,EAEN,cAAK,SAAS,EAAC,yBAAyB,YACtC,YAAG,SAAS,EAAC,oBAAoB,YAAE,OAAO,GAAK,GAC3C,IACF,EAEL,MAAM,IAAI,IAAI,IAAI,CACjB,cAAK,SAAS,EAAC,wBAAwB,YACrC,iBAAQ,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,mBAAmB,YACxD,MAAM,CAAC,KAAK,GACN,GACL,CACP,IACG,CACP,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type AlertProps } from '../../../lib/ui/Alert/Alert.js';
|
|
3
|
+
export interface AlertsProps {
|
|
4
|
+
alerts?: AlertProps[];
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare function Alerts(props: AlertsProps): JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { Alert } from '../../../lib/ui/Alert/Alert.js';
|
|
4
|
+
export function Alerts(props) {
|
|
5
|
+
const { alerts, children, className, ...rest } = props;
|
|
6
|
+
return (_jsxs("div", { className: classNames('seam-alerts', className), ...rest, children: [alerts?.map((alert, index) => (_jsx(Alert, { ...alert }, `${index}:${alert.message}`))), children] }));
|
|
7
|
+
}
|
|
8
|
+
//# sourceMappingURL=Alerts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alerts.js","sourceRoot":"","sources":["../../../src/lib/ui/Alert/Alerts.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAA;AAQ9D,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAEtD,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,KAAM,IAAI,aAC3D,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,KAAC,KAAK,OAAuC,KAAK,IAAtC,GAAG,KAAK,IAAI,KAAK,CAAC,OAAO,EAAE,CAAe,CACvD,CAAC,EACD,QAAQ,IACL,CACP,CAAA;AACH,CAAC"}
|
|
@@ -5,6 +5,8 @@ import { useAccessCodes } from '../../../lib/seam/access-codes/use-access-codes.
|
|
|
5
5
|
import { isLockDevice } from '../../../lib/seam/devices/types.js';
|
|
6
6
|
import { useToggleLock } from '../../../lib/seam/devices/use-toggle-lock.js';
|
|
7
7
|
import { AccessCodeTable } from '../../../lib/ui/AccessCodeTable/AccessCodeTable.js';
|
|
8
|
+
import {} from '../../../lib/ui/Alert/Alert.js';
|
|
9
|
+
import { Alerts } from '../../../lib/ui/Alert/Alerts.js';
|
|
8
10
|
import { Button } from '../../../lib/ui/Button.js';
|
|
9
11
|
import { BatteryStatus } from '../../../lib/ui/device/BatteryStatus.js';
|
|
10
12
|
import { DeviceImage } from '../../../lib/ui/device/DeviceImage.js';
|
|
@@ -36,13 +38,33 @@ function LockDeviceDetails(props) {
|
|
|
36
38
|
const toggleLockLabel = device.properties.locked ? t.unlock : t.lock;
|
|
37
39
|
const accessCodeCount = accessCodes?.length;
|
|
38
40
|
const accessCodeLength = device.properties?.schlage_metadata?.access_code_length;
|
|
41
|
+
function generateDeviceAlerts() {
|
|
42
|
+
if (device.errors.length === 0 && device.warnings.length === 0) {
|
|
43
|
+
return [];
|
|
44
|
+
}
|
|
45
|
+
const alerts = [];
|
|
46
|
+
if (device.errors.length > 0) {
|
|
47
|
+
alerts.push(...device.errors.map((error) => ({
|
|
48
|
+
variant: 'error',
|
|
49
|
+
message: error.message,
|
|
50
|
+
})));
|
|
51
|
+
}
|
|
52
|
+
if (device.warnings.length > 0) {
|
|
53
|
+
alerts.push(...device.warnings.map((warning) => ({
|
|
54
|
+
variant: 'warning',
|
|
55
|
+
message: warning.message,
|
|
56
|
+
})));
|
|
57
|
+
}
|
|
58
|
+
return alerts;
|
|
59
|
+
}
|
|
60
|
+
const alerts = generateDeviceAlerts();
|
|
39
61
|
if (accessCodes == null) {
|
|
40
62
|
return null;
|
|
41
63
|
}
|
|
42
64
|
if (accessCodesOpen) {
|
|
43
65
|
return (_jsx(AccessCodeTable, { deviceId: device.device_id, onBack: toggleAccessCodesOpen }));
|
|
44
66
|
}
|
|
45
|
-
return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device', onBack: onBack }), _jsxs("div", { className: 'seam-body', children: [
|
|
67
|
+
return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device', onBack: onBack }), _jsxs("div", { className: 'seam-body', children: [_jsxs("div", { className: 'seam-summary', children: [_jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.device }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), _jsxs("span", { className: 'seam-label', children: [t.power, ":"] }), ' ', _jsx(BatteryStatus, { device: device }), _jsx(DeviceModel, { device: device })] })] })] }), alerts.length > 0 && (_jsx(Alerts, { alerts: alerts, className: 'seam-alerts-space-top' }))] }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: toggleAccessCodesOpen, children: [_jsxs("span", { className: 'seam-value', children: [accessCodeCount, " ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content seam-lock-status', children: [_jsxs("div", { children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx("div", { className: 'seam-right', children: _jsx(Button, { size: 'small', onClick: () => {
|
|
46
68
|
toggleLock.mutate();
|
|
47
69
|
}, children: toggleLockLabel }) })] }), _jsx(AccessCodeLength, { accessCodeLength: accessCodeLength })] })] })] }));
|
|
48
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAA;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAA;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,SAAS,MAAM,mBAAmB,CAAA;AAOzC,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAElC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QAC3B,SAAS,EAAE,QAAQ;KACpB,CAAC,CAAA;IAEF,IAAI,MAAM,IAAI,IAAI,EAAE;QAClB,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,CAAA;AAC9D,CAAC;AAED,SAAS,iBAAiB,CAAC,KAAkD;IAC3E,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { isLockDevice } from '../../../lib/seam/devices/types.js';
|
|
4
4
|
import { useDevices, } from '../../../lib/seam/devices/use-devices.js';
|
|
@@ -9,6 +9,7 @@ import { OnlineStatus } from '../../../lib/ui/device/OnlineStatus.js';
|
|
|
9
9
|
import { DeviceDetails } from '../../../lib/ui/DeviceDetails/DeviceDetails.js';
|
|
10
10
|
import { getDeviceModel } from '../../../lib/ui/DeviceDetails/DeviceModel.js';
|
|
11
11
|
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
|
|
12
|
+
import { EmptyPlaceholder } from '../../../lib/ui/Table/EmptyPlaceholder.js';
|
|
12
13
|
import { TableBody } from '../../../lib/ui/Table/TableBody.js';
|
|
13
14
|
import { TableCell } from '../../../lib/ui/Table/TableCell.js';
|
|
14
15
|
import { TableHeader } from '../../../lib/ui/Table/TableHeader.js';
|
|
@@ -34,9 +35,16 @@ export function DeviceTable({ onBack, ...props }) {
|
|
|
34
35
|
return null;
|
|
35
36
|
}
|
|
36
37
|
const deviceCount = devices.length;
|
|
37
|
-
return (_jsxs("div", { className: 'seam-device-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", deviceCount, ")"] })] }) }), _jsx(TableBody, { children:
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
return (_jsxs("div", { className: 'seam-device-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", deviceCount, ")"] })] }) }), _jsx(TableBody, { children: _jsx(Body, { devices: devices, selectDevice: selectDevice }) })] }));
|
|
39
|
+
}
|
|
40
|
+
function Body(props) {
|
|
41
|
+
const { devices, selectDevice } = props;
|
|
42
|
+
if (devices.length === 0) {
|
|
43
|
+
return _jsx(EmptyPlaceholder, { children: t.noDevicesMessage });
|
|
44
|
+
}
|
|
45
|
+
return (_jsx(_Fragment, { children: devices.map((device) => (_jsx(DeviceRow, { device: device, onClick: () => {
|
|
46
|
+
selectDevice(device.device_id);
|
|
47
|
+
} }, device.device_id))) }));
|
|
40
48
|
}
|
|
41
49
|
function DeviceRow(props) {
|
|
42
50
|
const { device, onClick } = props;
|
|
@@ -49,5 +57,6 @@ function DeviceRow(props) {
|
|
|
49
57
|
const t = {
|
|
50
58
|
devices: 'Devices',
|
|
51
59
|
unknownLock: 'Unknown Lock',
|
|
60
|
+
noDevicesMessage: 'Sorry, no devices were found',
|
|
52
61
|
};
|
|
53
62
|
//# sourceMappingURL=DeviceTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeviceTable.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceTable/DeviceTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EACL,UAAU,GAGX,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAQlD,MAAM,UAAU,WAAW,CAAC,EAC1B,MAAM,EACN,GAAG,KAAK,EACS;IACjB,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAEhE,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAEtE,IAAI,gBAAgB,IAAI,IAAI,EAAE;QAC5B,OAAO,CACL,KAAC,aAAa,IACZ,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,EAAE,GAAG,EAAE;gBACX,YAAY,CAAC,IAAI,CAAC,CAAA;YACpB,CAAC,GACD,CACH,CAAA;KACF;IAED,IAAI,SAAS,EAAE;QACb,OAAO,8BAAU,CAAA;KAClB;IAED,IAAI,OAAO,EAAE;QACX,OAAO,sBAAI,KAAK,EAAE,OAAO,GAAK,CAAA;KAC/B;IAED,IAAI,OAAO,IAAI,IAAI,EAAE;QACnB,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAA;IAElC,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,GAAI,EACjC,KAAC,WAAW,cACV,MAAC,UAAU,eACR,CAAC,CAAC,OAAO,OAAE,MAAC,OAAO,oBAAG,WAAW,SAAY,IACnC,GACD,EACd,KAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"DeviceTable.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceTable/DeviceTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export declare function SupportedDevices(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,7 +4,7 @@ import axios from 'axios';
|
|
|
4
4
|
import { Button } from '../../../lib/ui/Button.js';
|
|
5
5
|
import SupportedDeviceRow from './SupportedDeviceRow.js';
|
|
6
6
|
import SupportedDevicesHeader from './SupportedDevicesHeader.js';
|
|
7
|
-
export
|
|
7
|
+
export function SupportedDevices() {
|
|
8
8
|
const { data, isLoading, isError, refetch } = useQuery({
|
|
9
9
|
queryKey: ['supported_devices'],
|
|
10
10
|
queryFn: async () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SupportedDevices.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDevices.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGzC,OAAO,kBAAkB,MAAM,yBAAyB,CAAA;AACxD,OAAO,sBAAsB,MAAM,6BAA6B,CAAA;AAEhE,MAAM,
|
|
1
|
+
{"version":3,"file":"SupportedDevices.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDevices.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGzC,OAAO,kBAAkB,MAAM,yBAAyB,CAAA;AACxD,OAAO,sBAAsB,MAAM,6BAA6B,CAAA;AAEhE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,QAAQ,CAInD;QACD,QAAQ,EAAE,CAAC,mBAAmB,CAAC;QAC/B,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,OAAO,MAAM,KAAK,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAA;QAC3E,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,mCAAmC,aAC/C,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,0CAA0C,YACvD,mDAA+B,GAC3B,CACP,EAEA,OAAO,IAAI,CACV,eAAK,SAAS,EAAC,0CAA0C,aACvD,qEAAiD,EACjD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,OAAO,EAAE,CAAA;4BAChB,CAAC,sBAGM,IACL,CACP,EAEA,CAAC,SAAS;oBACT,CAAC,OAAO;oBACR,IAAI,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI;oBAClC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,IAAI,CAC1C,iBAAO,SAAS,EAAC,8BAA8B,aAC7C,KAAC,sBAAsB,KAAG,EAC1B,0BACG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,KAAC,kBAAkB,IAEjB,WAAW,EAAE,WAAW,IADnB,WAAW,CAAC,qBAAqB,CAEtC,CACH,CAAC,GACI,IACF,CACT,IACC,GACL,CACJ,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyPlaceholder.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/EmptyPlaceholder.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACC;IACT,OAAO,CACL,cAAK,SAAS,EAAC,8BAA8B,KAAK,KAAK,YACpD,QAAQ,GACL,CACP,CAAA;AACH,CAAC"}
|
package/lib/ui/index.d.ts
CHANGED
package/lib/ui/index.js
CHANGED
|
@@ -2,4 +2,5 @@ export * from './AccessCodeDetails/AccessCodeDetails.js';
|
|
|
2
2
|
export * from './AccessCodeTable/AccessCodeTable.js';
|
|
3
3
|
export * from './DeviceDetails/DeviceDetails.js';
|
|
4
4
|
export * from './DeviceTable/DeviceTable.js';
|
|
5
|
+
export * from './SupportedDevices/SupportedDevices.js';
|
|
5
6
|
//# sourceMappingURL=index.js.map
|
package/lib/ui/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAA;AACxD,cAAc,sCAAsC,CAAA;AACpD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAA;AACxD,cAAc,sCAAsC,CAAA;AACpD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wCAAwC,CAAA"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { SVGProps } from 'react'
|
|
2
|
+
export const ExclamationCircleIcon = (
|
|
3
|
+
props: SVGProps<SVGSVGElement>
|
|
4
|
+
): JSX.Element => (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
7
|
+
width={24}
|
|
8
|
+
height={24}
|
|
9
|
+
fill='none'
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<mask
|
|
13
|
+
id='exclamation-circle_svg__a'
|
|
14
|
+
width={24}
|
|
15
|
+
height={24}
|
|
16
|
+
x={0}
|
|
17
|
+
y={0}
|
|
18
|
+
maskUnits='userSpaceOnUse'
|
|
19
|
+
style={{
|
|
20
|
+
maskType: 'alpha',
|
|
21
|
+
}}
|
|
22
|
+
>
|
|
23
|
+
<path fill='#D9D9D9' d='M0 0h24v24H0z' />
|
|
24
|
+
</mask>
|
|
25
|
+
<g mask='url(#exclamation-circle_svg__a)'>
|
|
26
|
+
<path
|
|
27
|
+
fill='#E36857'
|
|
28
|
+
d='M12 17a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 16c0 .283.096.52.288.712A.965.965 0 0 0 12 17Zm-1-4h2V7h-2v6Zm1 9a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2c1.383 0 2.683.262 3.9.787a10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Z'
|
|
29
|
+
/>
|
|
30
|
+
</g>
|
|
31
|
+
</svg>
|
|
32
|
+
)
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { SVGProps } from 'react'
|
|
2
|
+
export const TriangleWarningIcon = (
|
|
3
|
+
props: SVGProps<SVGSVGElement>
|
|
4
|
+
): JSX.Element => (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
7
|
+
width={24}
|
|
8
|
+
height={24}
|
|
9
|
+
fill='none'
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<mask
|
|
13
|
+
id='triangle-warning_svg__a'
|
|
14
|
+
width={24}
|
|
15
|
+
height={24}
|
|
16
|
+
x={0}
|
|
17
|
+
y={0}
|
|
18
|
+
maskUnits='userSpaceOnUse'
|
|
19
|
+
style={{
|
|
20
|
+
maskType: 'alpha',
|
|
21
|
+
}}
|
|
22
|
+
>
|
|
23
|
+
<path fill='#D9D9D9' d='M0 0h24v24H0z' />
|
|
24
|
+
</mask>
|
|
25
|
+
<g mask='url(#triangle-warning_svg__a)'>
|
|
26
|
+
<path
|
|
27
|
+
fill='#F3980F'
|
|
28
|
+
d='M1 21 12 2l11 19H1Zm11-3a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 17a.967.967 0 0 0-.287-.712A.968.968 0 0 0 12 16a.965.965 0 0 0-.712.288A.965.965 0 0 0 11 17c0 .283.096.52.288.712A.965.965 0 0 0 12 18Zm-1-3h2v-5h-2v5Z'
|
|
29
|
+
/>
|
|
30
|
+
</g>
|
|
31
|
+
</svg>
|
|
32
|
+
)
|
|
@@ -4,12 +4,16 @@ import type { AccessCode } from 'seamapi'
|
|
|
4
4
|
import { copy } from 'lib/copy.js'
|
|
5
5
|
import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
|
|
6
6
|
import { CopyIcon } from 'lib/icons/Copy.js'
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
useAccessCodes,
|
|
9
|
+
type UseAccessCodesData,
|
|
10
|
+
} from 'lib/seam/access-codes/use-access-codes.js'
|
|
8
11
|
import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
|
|
9
12
|
import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
|
|
10
13
|
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
|
|
11
14
|
import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
|
|
12
15
|
import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
|
|
16
|
+
import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
|
|
13
17
|
import { TableBody } from 'lib/ui/Table/TableBody.js'
|
|
14
18
|
import { TableCell } from 'lib/ui/Table/TableCell.js'
|
|
15
19
|
import { TableHeader } from 'lib/ui/Table/TableHeader.js'
|
|
@@ -59,52 +63,81 @@ export function AccessCodeTable(
|
|
|
59
63
|
</TableTitle>
|
|
60
64
|
</TableHeader>
|
|
61
65
|
<TableBody>
|
|
62
|
-
{accessCodes
|
|
63
|
-
|
|
64
|
-
|
|
66
|
+
<Body accessCodes={accessCodes} selectAccessCode={selectAccessCode} />
|
|
67
|
+
</TableBody>
|
|
68
|
+
</div>
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function Body(props: {
|
|
73
|
+
accessCodes: Array<UseAccessCodesData[number]>
|
|
74
|
+
selectAccessCode: (accessCode: AccessCode) => void
|
|
75
|
+
}) {
|
|
76
|
+
const { accessCodes, selectAccessCode } = props
|
|
77
|
+
|
|
78
|
+
if (accessCodes.length === 0) {
|
|
79
|
+
return <EmptyPlaceholder>{t.noAccessCodesMessage}</EmptyPlaceholder>
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return (
|
|
83
|
+
<>
|
|
84
|
+
{accessCodes.map((accessCode) => (
|
|
85
|
+
<AccessCodeRow
|
|
86
|
+
key={accessCode.access_code_id}
|
|
87
|
+
accessCode={accessCode}
|
|
88
|
+
onClick={() => {
|
|
89
|
+
selectAccessCode(accessCode)
|
|
90
|
+
}}
|
|
91
|
+
/>
|
|
92
|
+
))}
|
|
93
|
+
</>
|
|
94
|
+
)
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function AccessCodeRow(props: {
|
|
98
|
+
accessCode: UseAccessCodesData[number]
|
|
99
|
+
onClick: () => void
|
|
100
|
+
}) {
|
|
101
|
+
const { onClick, accessCode } = props
|
|
102
|
+
return (
|
|
103
|
+
<TableRow key={accessCode.access_code_id} onClick={onClick}>
|
|
104
|
+
<TableCell className='seam-icon-cell'>
|
|
105
|
+
<div>
|
|
106
|
+
<AccessCodeKeyIcon />
|
|
107
|
+
</div>
|
|
108
|
+
</TableCell>
|
|
109
|
+
<TableCell className='seam-name-cell'>
|
|
110
|
+
<Title>{accessCode.name}</Title>
|
|
111
|
+
<CodeDetails accessCode={accessCode} />
|
|
112
|
+
</TableCell>
|
|
113
|
+
<TableCell className='seam-action-cell'>
|
|
114
|
+
<MoreActionsMenu
|
|
115
|
+
MenuProps={{
|
|
116
|
+
BackgroundProps: {
|
|
117
|
+
className: 'seam-access-code-table-action-menu',
|
|
118
|
+
},
|
|
119
|
+
}}
|
|
120
|
+
>
|
|
121
|
+
<MenuItem
|
|
65
122
|
onClick={() => {
|
|
66
|
-
|
|
123
|
+
void copy(accessCode.code ?? '')
|
|
67
124
|
}}
|
|
68
125
|
>
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
</
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<MoreActionsMenu
|
|
80
|
-
MenuProps={{
|
|
81
|
-
BackgroundProps: {
|
|
82
|
-
className: 'seam-access-code-table-action-menu',
|
|
83
|
-
},
|
|
84
|
-
}}
|
|
85
|
-
>
|
|
86
|
-
<MenuItem
|
|
87
|
-
onClick={() => {
|
|
88
|
-
void copy(code.code ?? '')
|
|
89
|
-
}}
|
|
90
|
-
>
|
|
91
|
-
<div className='menu-item-copy'>
|
|
92
|
-
<span>
|
|
93
|
-
{t.copyCode} - {code.code}
|
|
94
|
-
</span>
|
|
95
|
-
<CopyIcon />
|
|
96
|
-
</div>
|
|
97
|
-
</MenuItem>
|
|
98
|
-
</MoreActionsMenu>
|
|
99
|
-
</TableCell>
|
|
100
|
-
</TableRow>
|
|
101
|
-
))}
|
|
102
|
-
</TableBody>
|
|
103
|
-
</div>
|
|
126
|
+
<div className='menu-item-copy'>
|
|
127
|
+
<span>
|
|
128
|
+
{t.copyCode} - {accessCode.code}
|
|
129
|
+
</span>
|
|
130
|
+
<CopyIcon />
|
|
131
|
+
</div>
|
|
132
|
+
</MenuItem>
|
|
133
|
+
</MoreActionsMenu>
|
|
134
|
+
</TableCell>
|
|
135
|
+
</TableRow>
|
|
104
136
|
)
|
|
105
137
|
}
|
|
106
138
|
|
|
107
139
|
const t = {
|
|
108
140
|
accessCodes: 'Access Codes',
|
|
109
141
|
copyCode: 'Copy code',
|
|
142
|
+
noAccessCodesMessage: 'Sorry, no access codes were found',
|
|
110
143
|
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import classNames from 'classnames'
|
|
2
|
+
import type { MouseEventHandler } from 'react'
|
|
3
|
+
|
|
4
|
+
import { ExclamationCircleIcon } from 'lib/icons/ExclamationCircle.js'
|
|
5
|
+
import { TriangleWarningIcon } from 'lib/icons/TriangleWarning.js'
|
|
6
|
+
|
|
7
|
+
export interface AlertProps {
|
|
8
|
+
variant: 'warning' | 'error'
|
|
9
|
+
message: string
|
|
10
|
+
action?: {
|
|
11
|
+
label: string
|
|
12
|
+
onClick: MouseEventHandler
|
|
13
|
+
}
|
|
14
|
+
className?: string
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function Alert(props: AlertProps): JSX.Element {
|
|
18
|
+
const { variant, message, action, className, ...rest } = props
|
|
19
|
+
|
|
20
|
+
const handleClick: MouseEventHandler<HTMLButtonElement> = (ev) => {
|
|
21
|
+
action?.onClick(ev)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<div
|
|
26
|
+
className={classNames('seam-alert', `seam-${variant}-alert`, className)}
|
|
27
|
+
{...rest}
|
|
28
|
+
>
|
|
29
|
+
<div className='seam-alert-content'>
|
|
30
|
+
<div className='seam-alert-icon'>
|
|
31
|
+
{variant === 'warning' ? (
|
|
32
|
+
<TriangleWarningIcon />
|
|
33
|
+
) : (
|
|
34
|
+
<ExclamationCircleIcon />
|
|
35
|
+
)}
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div className='seam-alert-message-wrap'>
|
|
39
|
+
<p className='seam-alert-message'>{message}</p>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
{action != null && (
|
|
44
|
+
<div className='seam-alert-action-wrap'>
|
|
45
|
+
<button onClick={handleClick} className='seam-alert-action'>
|
|
46
|
+
{action.label}
|
|
47
|
+
</button>
|
|
48
|
+
</div>
|
|
49
|
+
)}
|
|
50
|
+
</div>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import classNames from 'classnames'
|
|
2
|
+
|
|
3
|
+
import { Alert, type AlertProps } from 'lib/ui/Alert/Alert.js'
|
|
4
|
+
|
|
5
|
+
export interface AlertsProps {
|
|
6
|
+
alerts?: AlertProps[]
|
|
7
|
+
children?: React.ReactNode
|
|
8
|
+
className?: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export function Alerts(props: AlertsProps): JSX.Element {
|
|
12
|
+
const { alerts, children, className, ...rest } = props
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<div className={classNames('seam-alerts', className)} {...rest}>
|
|
16
|
+
{alerts?.map((alert, index) => (
|
|
17
|
+
<Alert key={`${index}:${alert.message}`} {...alert} />
|
|
18
|
+
))}
|
|
19
|
+
{children}
|
|
20
|
+
</div>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
@@ -7,6 +7,8 @@ import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
|
|
|
7
7
|
import { isLockDevice } from 'lib/seam/devices/types.js'
|
|
8
8
|
import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
|
|
9
9
|
import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
|
|
10
|
+
import { type AlertProps } from 'lib/ui/Alert/Alert.js'
|
|
11
|
+
import { Alerts } from 'lib/ui/Alert/Alerts.js'
|
|
10
12
|
import { Button } from 'lib/ui/Button.js'
|
|
11
13
|
import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
|
|
12
14
|
import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
|
|
@@ -40,6 +42,7 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
|
|
|
40
42
|
|
|
41
43
|
function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
|
|
42
44
|
const { device, onBack } = props
|
|
45
|
+
|
|
43
46
|
const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
|
|
44
47
|
const toggleLock = useToggleLock(device)
|
|
45
48
|
const { accessCodes } = useAccessCodes({
|
|
@@ -54,6 +57,36 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
|
|
|
54
57
|
const accessCodeLength =
|
|
55
58
|
device.properties?.schlage_metadata?.access_code_length
|
|
56
59
|
|
|
60
|
+
function generateDeviceAlerts() {
|
|
61
|
+
if (device.errors.length === 0 && device.warnings.length === 0) {
|
|
62
|
+
return []
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const alerts: AlertProps[] = []
|
|
66
|
+
|
|
67
|
+
if (device.errors.length > 0) {
|
|
68
|
+
alerts.push(
|
|
69
|
+
...device.errors.map((error) => ({
|
|
70
|
+
variant: 'error' as const,
|
|
71
|
+
message: error.message,
|
|
72
|
+
}))
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
if (device.warnings.length > 0) {
|
|
77
|
+
alerts.push(
|
|
78
|
+
...device.warnings.map((warning) => ({
|
|
79
|
+
variant: 'warning' as const,
|
|
80
|
+
message: warning.message,
|
|
81
|
+
}))
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
return alerts
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const alerts = generateDeviceAlerts()
|
|
89
|
+
|
|
57
90
|
if (accessCodes == null) {
|
|
58
91
|
return null
|
|
59
92
|
}
|
|
@@ -88,6 +121,10 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
|
|
|
88
121
|
</div>
|
|
89
122
|
</div>
|
|
90
123
|
</div>
|
|
124
|
+
|
|
125
|
+
{alerts.length > 0 && (
|
|
126
|
+
<Alerts alerts={alerts} className='seam-alerts-space-top' />
|
|
127
|
+
)}
|
|
91
128
|
</div>
|
|
92
129
|
<div className='seam-box'>
|
|
93
130
|
<div
|
|
@@ -13,6 +13,7 @@ import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
|
|
|
13
13
|
import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
|
|
14
14
|
import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
|
|
15
15
|
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
|
|
16
|
+
import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
|
|
16
17
|
import { TableBody } from 'lib/ui/Table/TableBody.js'
|
|
17
18
|
import { TableCell } from 'lib/ui/Table/TableCell.js'
|
|
18
19
|
import { TableHeader } from 'lib/ui/Table/TableHeader.js'
|
|
@@ -69,20 +70,37 @@ export function DeviceTable({
|
|
|
69
70
|
</TableTitle>
|
|
70
71
|
</TableHeader>
|
|
71
72
|
<TableBody>
|
|
72
|
-
{devices
|
|
73
|
-
<DeviceRow
|
|
74
|
-
device={device}
|
|
75
|
-
key={device.device_id}
|
|
76
|
-
onClick={() => {
|
|
77
|
-
selectDevice(device.device_id)
|
|
78
|
-
}}
|
|
79
|
-
/>
|
|
80
|
-
))}
|
|
73
|
+
<Body devices={devices} selectDevice={selectDevice} />
|
|
81
74
|
</TableBody>
|
|
82
75
|
</div>
|
|
83
76
|
)
|
|
84
77
|
}
|
|
85
78
|
|
|
79
|
+
function Body(props: {
|
|
80
|
+
devices: Array<UseDevicesData[number]>
|
|
81
|
+
selectDevice: (id: string) => void
|
|
82
|
+
}) {
|
|
83
|
+
const { devices, selectDevice } = props
|
|
84
|
+
|
|
85
|
+
if (devices.length === 0) {
|
|
86
|
+
return <EmptyPlaceholder>{t.noDevicesMessage}</EmptyPlaceholder>
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<>
|
|
91
|
+
{devices.map((device) => (
|
|
92
|
+
<DeviceRow
|
|
93
|
+
device={device}
|
|
94
|
+
key={device.device_id}
|
|
95
|
+
onClick={() => {
|
|
96
|
+
selectDevice(device.device_id)
|
|
97
|
+
}}
|
|
98
|
+
/>
|
|
99
|
+
))}
|
|
100
|
+
</>
|
|
101
|
+
)
|
|
102
|
+
}
|
|
103
|
+
|
|
86
104
|
function DeviceRow(props: {
|
|
87
105
|
device: UseDevicesData[number]
|
|
88
106
|
onClick: () => void
|
|
@@ -118,4 +136,5 @@ function DeviceRow(props: {
|
|
|
118
136
|
const t = {
|
|
119
137
|
devices: 'Devices',
|
|
120
138
|
unknownLock: 'Unknown Lock',
|
|
139
|
+
noDevicesMessage: 'Sorry, no devices were found',
|
|
121
140
|
}
|
|
@@ -7,7 +7,7 @@ import type { DeviceModel } from 'lib/ui/SupportedDevices/types.js'
|
|
|
7
7
|
import SupportedDeviceRow from './SupportedDeviceRow.js'
|
|
8
8
|
import SupportedDevicesHeader from './SupportedDevicesHeader.js'
|
|
9
9
|
|
|
10
|
-
export
|
|
10
|
+
export function SupportedDevices() {
|
|
11
11
|
const { data, isLoading, isError, refetch } = useQuery<{
|
|
12
12
|
data: {
|
|
13
13
|
device_models?: DeviceModel[]
|
package/src/lib/ui/index.ts
CHANGED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
@use './colors';
|
|
2
|
+
|
|
3
|
+
@mixin all {
|
|
4
|
+
// Alerts
|
|
5
|
+
.seam-alerts {
|
|
6
|
+
width: 100%;
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: flex-start;
|
|
9
|
+
align-items: flex-start;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
gap: 8px;
|
|
12
|
+
|
|
13
|
+
&.seam-alerts-space-top {
|
|
14
|
+
margin-top: 16px;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Alert
|
|
19
|
+
.seam-alert {
|
|
20
|
+
width: 100%;
|
|
21
|
+
min-height: 70px;
|
|
22
|
+
padding: 8px 16px;
|
|
23
|
+
border-radius: 8px;
|
|
24
|
+
display: flex;
|
|
25
|
+
justify-content: space-between;
|
|
26
|
+
align-items: center;
|
|
27
|
+
flex-direction: row;
|
|
28
|
+
gap: 16px;
|
|
29
|
+
|
|
30
|
+
.seam-alert-action {
|
|
31
|
+
appearance: none;
|
|
32
|
+
height: 32px;
|
|
33
|
+
padding: 0 10px;
|
|
34
|
+
border-radius: 6px;
|
|
35
|
+
background-color: transparent;
|
|
36
|
+
font-size: 14px;
|
|
37
|
+
line-height: 1;
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
white-space: nowrap;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
|
|
42
|
+
&:hover {
|
|
43
|
+
background-color: colors.$item-hover-bg;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&.seam-warning-alert {
|
|
48
|
+
background-color: colors.$alert-warn-fill;
|
|
49
|
+
border: 1px solid colors.$alert-warn-line;
|
|
50
|
+
|
|
51
|
+
.seam-alert-action {
|
|
52
|
+
border: 1px solid colors.$alert-warn-dark;
|
|
53
|
+
color: colors.$alert-warn-dark;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&.seam-error-alert {
|
|
58
|
+
background-color: colors.$alert-error-fill;
|
|
59
|
+
border: 1px solid colors.$alert-error-line;
|
|
60
|
+
|
|
61
|
+
.seam-alert-action {
|
|
62
|
+
border: 1px solid colors.$alert-error-dark;
|
|
63
|
+
color: colors.$alert-error-dark;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&.seam-alert-space-top {
|
|
68
|
+
margin-top: 16px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.seam-alert-icon {
|
|
72
|
+
width: 24px;
|
|
73
|
+
height: 24px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.seam-alert-content {
|
|
77
|
+
display: flex;
|
|
78
|
+
justify-content: flex-start;
|
|
79
|
+
align-items: center;
|
|
80
|
+
flex-direction: row;
|
|
81
|
+
gap: 8px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.seam-alert-message-wrap {
|
|
85
|
+
.seam-alert-message {
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
font-weight: 400;
|
|
88
|
+
line-height: 134%;
|
|
89
|
+
color: colors.$text-default;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@media only screen and (width <= 500px) {
|
|
95
|
+
.seam-alert {
|
|
96
|
+
justify-content: flex-start;
|
|
97
|
+
flex-direction: column;
|
|
98
|
+
|
|
99
|
+
.seam-alert-content {
|
|
100
|
+
width: 100%;
|
|
101
|
+
align-items: flex-start;
|
|
102
|
+
flex-direction: column;
|
|
103
|
+
gap: 4px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.seam-alert-action-wrap {
|
|
107
|
+
width: 100%;
|
|
108
|
+
|
|
109
|
+
.seam-alert-action {
|
|
110
|
+
width: 100%;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
package/src/styles/_main.scss
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@use './typography';
|
|
3
3
|
@use './tables';
|
|
4
4
|
@use './inputs';
|
|
5
|
+
@use './alert';
|
|
5
6
|
@use './buttons';
|
|
6
7
|
@use './layout';
|
|
7
8
|
@use './access-code-table';
|
|
@@ -31,5 +32,6 @@
|
|
|
31
32
|
@include device-table.all;
|
|
32
33
|
@include access-code-table.all;
|
|
33
34
|
@include access-code-details.all;
|
|
35
|
+
@include alert.all;
|
|
34
36
|
@include supported-devices.all;
|
|
35
37
|
}
|
package/src/styles/_tables.scss
CHANGED
|
@@ -47,8 +47,20 @@
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
@mixin empty-placeholder {
|
|
51
|
+
.seam-table-empty-placeholder {
|
|
52
|
+
height: 300px;
|
|
53
|
+
font-size: 18px;
|
|
54
|
+
line-height: 132%;
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
50
61
|
@mixin all {
|
|
51
62
|
@include header;
|
|
52
63
|
@include row;
|
|
53
64
|
@include cell;
|
|
65
|
+
@include empty-placeholder;
|
|
54
66
|
}
|