@taiga-ui/legacy 4.0.0-rc.1

package/styles/mixins/textfield.less

@@ -0,0 +1,315 @@
+.textfield-host() {
+    position: relative;
+    display: block;
+    text-align: left;
+    border-radius: var(--tui-radius-m);
+    height: var(--tui-height);
+    min-height: var(--tui-height);
+    max-height: var(--tui-height);
+
+    &[data-size='s'] {
+        --tui-height: var(--tui-height-s);
+    }
+
+    &[data-size='m'] {
+        --tui-height: var(--tui-height-m);
+    }
+
+    &[data-size='l'] {
+        --tui-height: var(--tui-height-l);
+
+        font: var(--tui-font-text-m);
+        line-height: 1.25rem;
+    }
+}
+
+.textfield-content() {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    overflow: hidden;
+
+    :host[data-size='s'] & {
+        padding: 0 var(--tui-padding-s);
+    }
+
+    :host[data-size='m'] & {
+        padding: 0 var(--tui-padding-m);
+    }
+
+    :host[data-size='l'] & {
+        padding: 0 var(--tui-padding-l);
+    }
+}
+
+.textfield-input() {
+    .clearinput();
+    .fullsize();
+
+    border-style: solid;
+    border-color: transparent;
+    border-inline-start-width: var(--border-start, 0);
+    border-inline-end-width: var(--border-end, 0);
+    text-indent: var(--text-indent);
+    color: var(--tui-text-primary);
+    text-align: inherit;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-transform: inherit;
+    resize: none;
+
+    &[inputMode='none'] {
+        caret-color: transparent;
+    }
+
+    /* stylelint-disable */
+    /* Safari autofill icons */
+    //noinspection CssInvalidPseudoSelector
+    &:-webkit-autofill,
+    &:-webkit-autofill::first-line {
+        font-size: inherit;
+        line-height: inherit;
+    }
+    /* stylelint-enable */
+
+    //noinspection ALL
+    &::-webkit-caps-lock-indicator,
+    &::-webkit-contacts-auto-fill-button,
+    &::-webkit-credit-card-auto-fill-button,
+    &::-webkit-credentials-auto-fill-button,
+    &::-webkit-strong-password-auto-fill-button {
+        .webkit-auto-fill-button-hidden();
+    }
+
+    &::placeholder {
+        color: var(--tui-text-tertiary);
+        opacity: 0;
+    }
+
+    :host._focused:not(._readonly) &::placeholder,
+    :host-context(tui-primitive-textfield._focused:not(._readonly)) &::placeholder,
+    :host-context(tui-textarea._focused:not(._readonly)) &::placeholder,
+    :host-context(tui-text-area._focused:not(._readonly)) &::placeholder {
+        opacity: 1;
+    }
+
+    :host[data-size='s'] &,
+    :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),
+    :host-context(tui-textarea[data-size='s']):not(tui-textarea),
+    :host-context(tui-text-area[data-size='s']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-s);
+    }
+
+    :host[data-size='m'] &,
+    :host-context(tui-primitive-textfield[data-size='m']):not(tui-primitive-textfield),
+    :host-context(tui-textarea[data-size='m']):not(tui-textarea),
+    :host-context(tui-text-area[data-size='m']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-m);
+    }
+
+    :host[data-size='l'] &,
+    :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),
+    :host-context(tui-textarea[data-size='l']):not(tui-textarea),
+    :host-context(tui-text-area[data-size='l']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-l);
+    }
+
+    :host._disabled &,
+    :host-context(tui-primitive-textfield._disabled),
+    :host-context(tui-textarea._disabled),
+    :host-context(tui-text-area._disabled) {
+        // @bad TODO: research why you can reach disabled textfield with mask inside a label without that
+        pointer-events: none;
+    }
+
+    :host[data-size='l']:not(._label-outside) &,
+    :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
+        padding-top: 1.25rem;
+    }
+
+    :host[data-size='m']:not(._label-outside) &,
+    :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield) {
+        padding-top: 1rem;
+    }
+
+    :host[data-size='l']:not(._label-outside) & {
+        padding-top: 1.25rem;
+
+        // Workaround for raising placeholder in temporary autofill
+        &:-webkit-autofill + .t-content .t-placeholder {
+            font-size: 0.8156rem;
+            transform: translateY(-0.625rem);
+        }
+    }
+
+    :host[data-size='m']:not(._label-outside) & {
+        // Workaround for raising placeholder in temporary autofill
+        &:-webkit-autofill + .t-content .t-placeholder {
+            font-size: 0.69rem;
+            transform: translateY(-0.5rem);
+        }
+    }
+
+    :host._hidden input&,
+    :host-context(tui-primitive-textfield._hidden) {
+        opacity: 0;
+        text-indent: -10em; // Hide blinking caret even in IE
+        -webkit-user-select: none; // Hide blinking caret in mobile safari
+    }
+}
+
+.textfield-wrapper() {
+    flex: 1;
+    min-width: 0;
+    padding-inline-end: 0.25rem;
+}
+
+.textfield-label() {
+    .transition(~'transform, font-size, color, letter-spacing');
+    .text-overflow();
+    .safari-only({
+        & {
+            will-change: unset;
+            transition-property: transform, color, letter-spacing;
+        }
+    });
+
+    display: block;
+    width: 100%;
+    user-select: none;
+    font: var(--tui-font-text-s);
+    color: var(--tui-text-secondary);
+    pointer-events: none;
+    will-change: transform;
+    transform: translateY(0);
+
+    &_raised {
+        transform: translateY(-0.625rem);
+
+        :host[data-size='m'] & {
+            font: var(--tui-font-text-xs);
+            line-height: 1.25rem;
+            transform: translateY(-0.5rem);
+            letter-spacing: 0.025rem;
+        }
+
+        :host._invalid:not(._focused) &,
+        :host._invalid:not(._focused):hover & {
+            color: var(--tui-status-negative);
+        }
+    }
+
+    :host._focused &,
+    :host[data-size='m']._focused._label-outside &,
+    :host[data-size='l']._focused._label-outside & {
+        color: var(--tui-text-tertiary);
+    }
+
+    :host[data-size='l'] & {
+        font: var(--tui-font-text-m);
+        line-height: 1.25rem;
+
+        &_raised {
+            font-size: 0.8156rem;
+        }
+    }
+
+    :host[data-size='m']._focused:not(._label-outside) &,
+    :host[data-size='l']._focused:not(._label-outside) & {
+        color: var(--tui-text-primary);
+    }
+}
+
+.input-icon() {
+    position: relative;
+    display: flex;
+    width: 1.5rem;
+    height: 1.5rem;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    pointer-events: none;
+}
+
+.input-icons() {
+    display: flex;
+    align-items: center;
+
+    :host[data-size='m'] & {
+        margin-inline-end: -0.125rem;
+    }
+
+    :host[data-size='s'] & {
+        margin-inline-end: -0.375rem;
+    }
+
+    :host:not([data-size='s']) & > :not(:first-child) {
+        margin-inline-start: 0.25rem;
+    }
+}
+
+.icon-button() {
+    .input-icon();
+
+    pointer-events: auto;
+
+    :host._readonly &,
+    :host._disabled & {
+        pointer-events: none;
+    }
+}
+
+.textfield() {
+    :host {
+        .textfield-host();
+    }
+
+    .t-input {
+        .textfield-input();
+    }
+
+    .t-content {
+        .textfield-content();
+    }
+
+    .t-wrapper {
+        .textfield-wrapper();
+    }
+
+    .t-placeholder {
+        .textfield-label();
+    }
+
+    .t-cleaner {
+        .icon-button();
+
+        border: 0.25rem solid transparent;
+    }
+
+    .t-icon {
+        .input-icon();
+
+        &_left {
+            :host[data-size='s'] & {
+                margin-inline-start: -0.375rem;
+            }
+
+            :host[data-size='m'] & {
+                margin-inline-start: -0.125rem;
+                margin-inline-end: 0.375rem;
+            }
+
+            :host[data-size='l'] & {
+                margin-inline-end: 0.75rem;
+            }
+        }
+    }
+
+    .t-icons {
+        .input-icons();
+    }
+}

package/styles/mixins/textfield.scss

@@ -0,0 +1,306 @@
+$line-height-l: 1.25rem;
+
+@mixin textfield-host() {
+    @include text-basic();
+    position: relative;
+    display: block;
+    text-align: left;
+    border-radius: var(--tui-radius-m);
+    height: var(--tui-height);
+    min-height: var(--tui-height);
+    max-height: var(--tui-height);
+
+    &[data-size='s'] {
+        --tui-height: var(--tui-height-s);
+    }
+
+    &[data-size='m'] {
+        --tui-height: var(--tui-height-m);
+    }
+
+    &[data-size='l'] {
+        --tui-height: var(--tui-height-l);
+        font: var(--tui-font-text-m);
+        line-height: 1.25rem;
+    }
+}
+
+@mixin textfield-content() {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    overflow: hidden;
+
+    :host[data-size='s'] & {
+        padding: 0 var(--tui-padding-s);
+    }
+
+    :host[data-size='m'] & {
+        padding: 0 var(--tui-padding-m);
+    }
+
+    :host[data-size='l'] & {
+        padding: 0 var(--tui-padding-l);
+    }
+}
+
+@mixin textfield-input() {
+    @include text-basic();
+    @include clearinput();
+    @include fullsize();
+    border: solid transparent;
+    border-inline-start-width: var(--border-start, 0);
+    border-inline-end-width: var(--border-end, 0);
+    text-indent: var(--text-indent);
+    text-align: inherit;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-transform: inherit;
+    resize: none;
+
+    &[inputMode='none'] {
+        caret-color: transparent;
+    }
+
+    /* stylelint-disable */
+    /* Safari autofill icons */
+    //noinspection CssInvalidPseudoSelector
+    &:-webkit-autofill,
+    &:-webkit-autofill::first-line {
+        font-size: inherit;
+        line-height: inherit;
+    }
+    /* stylelint-enable */
+
+    //noinspection ALL
+    &::-webkit-caps-lock-indicator,
+    &::-webkit-contacts-auto-fill-button,
+    &::-webkit-credit-card-auto-fill-button,
+    &::-webkit-credentials-auto-fill-button,
+    &::-webkit-strong-password-auto-fill-button {
+        @include webkit-auto-fill-button-hidden();
+    }
+
+    &::placeholder {
+        color: var(--tui-text-tertiary);
+        opacity: 0;
+    }
+
+    :host._focused:not(._readonly) &::placeholder,
+    :host-context(tui-primitive-textfield._focused:not(._readonly)) &::placeholder,
+    :host-context(tui-textarea._focused:not(._readonly)) &::placeholder,
+    :host-context(tui-text-area._focused:not(._readonly)) &::placeholder {
+        opacity: 1;
+    }
+
+    :host[data-size='s'] &,
+    :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),
+    :host-context(tui-textarea[data-size='s']):not(tui-textarea),
+    :host-context(tui-text-area[data-size='s']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-s);
+    }
+
+    :host[data-size='m'] &,
+    :host-context(tui-primitive-textfield[data-size='m']):not(tui-primitive-textfield),
+    :host-context(tui-textarea[data-size='m']):not(tui-textarea),
+    :host-context(tui-text-area[data-size='m']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-m);
+    }
+
+    :host[data-size='l'] &,
+    :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),
+    :host-context(tui-textarea[data-size='l']):not(tui-textarea),
+    :host-context(tui-text-area[data-size='l']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-l);
+    }
+
+    :host._disabled &,
+    :host-context(tui-primitive-textfield._disabled),
+    :host-context(tui-textarea._disabled),
+    :host-context(tui-text-area._disabled) {
+        // @bad TODO: research why you can reach disabled textfield with mask inside a label without that
+        pointer-events: none;
+    }
+
+    :host[data-size='l']:not(._label-outside) &,
+    :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
+        padding-top: 1.25rem;
+
+        // Workaround for raising placeholder in temporary autofill
+        &:-webkit-autofill + .t-content .t-placeholder {
+            font-size: 0.8156rem;
+            transform: translateY(-0.625rem);
+        }
+    }
+
+    :host[data-size='m']:not(._label-outside) &,
+    :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield) {
+        padding-top: 1rem;
+
+        // Workaround for raising placeholder in temporary autofill
+        &:-webkit-autofill + .t-content .t-placeholder {
+            font-size: 0.69rem;
+            transform: translateY(-0.5rem);
+        }
+    }
+
+    :host._hidden input&,
+    :host-context(tui-primitive-textfield._hidden) {
+        opacity: 0;
+        text-indent: -10em; // Hide blinking caret even in IE
+        -webkit-user-select: none; // Hide blinking caret in mobile safari
+    }
+}
+
+@mixin textfield-wrapper() {
+    flex: 1;
+    min-width: 0;
+    padding-inline-end: 0.25rem;
+}
+
+@mixin textfield-label() {
+    @include transition('transform, font-size, color, letter-spacing');
+    @include text-overflow();
+    display: block;
+    width: 100%;
+    user-select: none;
+    font: var(--tui-font-text-s);
+    color: var(--tui-text-secondary);
+    pointer-events: none;
+    will-change: transform;
+    transform: translateY(0);
+
+    &_raised {
+        transform: translateY(-0.625rem);
+
+        :host[data-size='m'] & {
+            font: var(--tui-font-text-xs);
+            line-height: 1.25rem;
+            transform: translateY(-0.5rem);
+            letter-spacing: 0.025rem;
+        }
+
+        :host._invalid:not(._focused) &,
+        :host._invalid:not(._focused):hover & {
+            color: var(--tui-status-negative);
+        }
+    }
+
+    :host._focused &,
+    :host[data-size='m']._focused._label-outside &,
+    :host[data-size='l']._focused._label-outside & {
+        color: var(--tui-text-tertiary);
+    }
+
+    :host[data-size='l'] & {
+        font: var(--tui-font-text-m);
+        line-height: 1.25rem;
+
+        &_raised {
+            font-size: 0.8156rem;
+        }
+    }
+
+    :host[data-size='m']._focused:not(._label-outside) &,
+    :host[data-size='l']._focused:not(._label-outside) & {
+        color: var(--tui-text-primary);
+    }
+
+    @include safari-only {
+        & {
+            will-change: unset;
+            transition-property: transform, color, letter-spacing;
+        }
+    }
+}
+
+@mixin input-icon() {
+    position: relative;
+    display: flex;
+    width: 1.5rem;
+    height: 1.5rem;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    pointer-events: none;
+}
+
+@mixin input-icons() {
+    display: flex;
+    align-items: center;
+
+    :host[data-size='m'] & {
+        margin-inline-end: -0.125rem;
+    }
+
+    :host[data-size='s'] & {
+        margin-inline-end: -0.375rem;
+    }
+
+    :host:not([data-size='s']) & > :not(:first-child) {
+        margin-inline-start: 0.25rem;
+    }
+}
+
+@mixin icon-button() {
+    @include input-icon();
+    pointer-events: auto;
+
+    :host._readonly &,
+    :host._disabled & {
+        pointer-events: none;
+    }
+}
+
+@mixin textfield() {
+    :host {
+        @include textfield-host();
+    }
+
+    .t-input {
+        @include textfield-input();
+    }
+
+    .t-content {
+        @include textfield-content();
+    }
+
+    .t-wrapper {
+        @include textfield-wrapper();
+    }
+
+    .t-placeholder {
+        @include textfield-label();
+    }
+
+    .t-cleaner {
+        @include icon-button();
+    }
+
+    .t-icon {
+        @include input-icon();
+
+        &_left {
+            :host[data-size='s'] & {
+                margin-inline-start: -0.375rem;
+            }
+
+            :host[data-size='m'] & {
+                margin-inline-start: -0.125rem;
+                margin-inline-end: 0.375rem;
+            }
+
+            :host[data-size='l'] & {
+                margin-inline-end: 0.75rem;
+            }
+        }
+    }
+
+    .t-icons {
+        @include input-icons();
+    }
+}

package/styles/mixins/wrapper.less

@@ -0,0 +1,65 @@
+.wrapper-hover(@ruleset) {
+    @media (hover: hover) {
+        &:hover:not(._no-hover),
+        &[data-state='hover'] {
+            @ruleset();
+        }
+    }
+}
+
+.wrapper-active(@ruleset) {
+    &:active:not(._no-active),
+    &[data-state='active'],
+    &[data-state='active']:hover {
+        @ruleset();
+    }
+}
+
+.wrapper-readonly(@ruleset, @native: false) {
+    // Specificity artificially increased to match `:hover:not()` level
+    & when (@native = true) {
+        &:read-only:read-only,
+        &[data-state='readonly'][data-state='readonly'] {
+            @ruleset();
+        }
+    }
+
+    & when (@native = false) {
+        &[data-state='readonly'][data-state='readonly'] {
+            @ruleset();
+        }
+    }
+}
+
+.wrapper-disabled(@ruleset) {
+    // Specificity artificially increased to match `:hover:not()` level
+    &:disabled:disabled,
+    &[data-state='disabled'][data-state='disabled'] {
+        @ruleset();
+    }
+}
+
+.wrapper-focus(@ruleset) {
+    // Temporary rule until we get hostDirectives with Angular 15
+    :focus-visible:not([data-focused='false']) > &,
+    [data-focused='true'] > & {
+        @ruleset();
+    }
+
+    // TODO: Join rules together once all browsers support focus-visible
+    // Specificity artificially increased to match `:hover:not()` level
+    &:focus-visible:focus-visible {
+        @ruleset();
+    }
+
+    &._focused._focused {
+        @ruleset();
+    }
+}
+
+.wrapper-invalid(@ruleset) {
+    &:invalid:invalid,
+    &._invalid._invalid {
+        @ruleset();
+    }
+}