Migrated inputgroup

components/lib/theme/aura/index.js

@@ -23,6 +23,7 @@ import global from 'primevue/theme/aura/global';
 import image from 'primevue/theme/aura/image';
 import inlinemessage from 'primevue/theme/aura/inlinemessage';
 import inplace from 'primevue/theme/aura/inplace';
+import inputgroup from 'primevue/theme/aura/inputgroup';
 import inputswitch from 'primevue/theme/aura/inputswitch';
 import inputtext from 'primevue/theme/aura/inputtext';
 import knob from 'primevue/theme/aura/knob';
@@ -243,6 +244,7 @@ export default {
         image,
         inlinemessage,
         inplace,
+        inputgroup,
         inputswitch,
         inputtext,
         orderlist,

components/lib/theme/aura/inputgroup/index.js

@@ -0,0 +1,111 @@
+export default {
+    variables: {
+        common: {
+            addon: {
+                background: '{form.field.background.color}',
+                borderColor: '{form.field.border.color}',
+                textColor: '{form.field.placeholder.color}'
+            }
+        }
+    },
+    css: `
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    background: var(--p-inputgroup-addon-background);
+    color: var(--p-inputgroup-addon-text-color);
+    border-top: 1px solid var(--p-inputgroup-addon-border-color);
+    border-left: 1px solid var(--p-inputgroup-addon-border-color);
+    border-bottom: 1px solid var(--p-inputgroup-addon-border-color);
+    padding: 0.5rem 0.75rem;
+    min-width: 2.5rem;
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup .p-inputtext,
+.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper,
+.p-fluid .p-inputgroup .p-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-inputgroup-addon:last-child {
+    border-right: 1px solid var(--p-inputgroup-addon-border-color);
+}
+
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-inputwrapper > .p-inputtext,
+.p-inputgroup > .p-float-label > .p-component {
+    border-radius: 0;
+    margin: 0;
+}
+
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
+    border-left: 0 none;
+}
+
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+    z-index: 1;
+}
+
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label,
+.p-inputgroup > .p-float-label > .p-component:focus~label {
+    z-index: 1;
+}
+
+.p-inputgroup-addon:first-child,
+.p-inputgroup button:first-child,
+.p-inputgroup input:first-child,
+.p-inputgroup > .p-inputwrapper:first-child,
+.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+
+.p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+
+.p-inputgroup-addon:last-child,
+.p-inputgroup button:last-child,
+.p-inputgroup input:last-child,
+.p-inputgroup > .p-inputwrapper:last-child,
+.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+.p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+.p-fluid .p-inputgroup .p-button {
+    width: auto;
+}
+
+.p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.5rem;
+}
+`
+};

components/lib/theme/aura/inputgroup/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}