@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
44 lines • 17.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation, } from '@angular/core';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/core/directives/appearance";
class TuiSurfaceStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSurfaceStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSurfaceStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-surface-styles" }, ngImport: i0, template: '', isInline: true, styles: ["[data-surface]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--tui-gap: .25rem;position:relative;box-sizing:border-box;background:none no-repeat;background-size:cover;overflow:hidden;isolation:isolate;-webkit-appearance:none;appearance:none;border:0;font-size:inherit;line-height:inherit;text-decoration:none;transition-property:background,border-radius,box-shadow,transform,-webkit-backdrop-filter,-webkit-mask!important;transition-property:backdrop-filter,background,border-radius,box-shadow,mask,transform!important;transition-property:backdrop-filter,background,border-radius,box-shadow,mask,transform,-webkit-backdrop-filter,-webkit-mask!important}[data-surface]:focus-visible{outline-color:var(--tui-border-focus)}@supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)){[data-surface]:before{mix-blend-mode:multiply}}button[data-surface]{cursor:pointer}[data-surface]:before,[data-surface]:after,[tuiSurfaceLayer]:before,[tuiSurfaceLayer]:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";z-index:-1;border-radius:inherit;pointer-events:none;background-size:cover;background-repeat:no-repeat;transition-property:opacity,transform,-webkit-backdrop-filter;transition-property:opacity,backdrop-filter,transform;transition-property:opacity,backdrop-filter,transform,-webkit-backdrop-filter}[tuiSurfaceLayer]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;position:absolute!important;z-index:-1;object-fit:cover;border-radius:inherit;box-sizing:border-box;transition-property:box-shadow,filter,padding}input[tuiSurfaceLayer]+[tuiSurfaceLayer]{will-change:padding;background-clip:content-box;overflow:clip;overflow-clip-margin:content-box}input[tuiSurfaceLayer]:checked+[tuiSurfaceLayer]{padding:var(--tui-gap)}input[tuiSurfaceLayer]:focus-visible+[tuiSurfaceLayer]{padding:var(--tui-gap)}@media (hover: hover) and (pointer: fine){[data-surface]:hover input[tuiSurfaceLayer]+[tuiSurfaceLayer]{padding:var(--tui-gap)}}input[tuiSurfaceLayer]{color:var(--tui-background-accent-2);-webkit-appearance:none;appearance:none;margin:0;border-radius:inherit;outline:none;box-shadow:inset 0 0,inset 0 0 var(--tui-background-neutral-1)}input[tuiSurfaceLayer]:checked{box-shadow:inset 0 0 0 calc(var(--tui-gap) / 2),inset 0 0 var(--tui-background-neutral-1)}input[tuiSurfaceLayer]:focus-visible{box-shadow:inset 0 0,inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1)}input[tuiSurfaceLayer]:checked:focus-visible{filter:brightness(.7);box-shadow:inset 0 0 0 calc(var(--tui-gap) / 2),inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1)}@media (hover: hover) and (pointer: fine){[data-surface]:hover input[tuiSurfaceLayer]{box-shadow:inset 0 0,inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1)}[data-surface]:hover input[tuiSurfaceLayer]:checked{filter:brightness(.9);box-shadow:inset 0 0 0 calc(var(--tui-gap) / 2),inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1)}}[tuiSurface][data-surface=elevated],[tuiSurface][data-surface=floating]{box-shadow:var(--tui-shadow-small);background-color:var(--tui-background-elevation-2)}[tuiSurface][data-surface=elevated]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active,[tuiSurface][data-surface=floating]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active{box-shadow:var(--tui-shadow-small);transform:scale(.95)}@media (hover: hover) and (pointer: fine){[tuiSurface][data-surface=elevated]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover,[tuiSurface][data-surface=floating]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover{box-shadow:var(--tui-shadow-small-hover);transform:translate3d(0,-.25rem,0);background:var(--tui-background-elevation-2)}}[tuiSurface][data-surface=elevated]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active,[tuiSurface][data-surface=floating]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active{box-shadow:var(--tui-shadow-small);transform:scale(.95)}@media (hover: hover) and (pointer: fine){[tuiSurface][data-surface=elevated]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover,[tuiSurface][data-surface=floating]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover{box-shadow:var(--tui-shadow-small-hover);transform:translate3d(0,-.25rem,0);background:var(--tui-background-elevation-2)}}[tuiSurface][data-surface=flat],[tuiSurface][data-surface=neutral]{background-color:var(--tui-background-neutral-1)}[tuiSurface][data-surface=flat]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active,[tuiSurface][data-surface=neutral]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active{transform:scale(.95)}@media (hover: hover) and (pointer: fine){[tuiSurface][data-surface=flat]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover,[tuiSurface][data-surface=neutral]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover{transform:scale(1.15)}}[tuiSurface][data-surface=flat]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active,[tuiSurface][data-surface=neutral]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active{transform:scale(.95)}@media (hover: hover) and (pointer: fine){[tuiSurface][data-surface=flat]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover,[tuiSurface][data-surface=neutral]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover{transform:scale(1.15)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSurfaceStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-surface-styles',
}, styles: ["[data-surface]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--tui-gap: .25rem;position:relative;box-sizing:border-box;background:none no-repeat;background-size:cover;overflow:hidden;isolation:isolate;-webkit-appearance:none;appearance:none;border:0;font-size:inherit;line-height:inherit;text-decoration:none;transition-property:background,border-radius,box-shadow,transform,-webkit-backdrop-filter,-webkit-mask!important;transition-property:backdrop-filter,background,border-radius,box-shadow,mask,transform!important;transition-property:backdrop-filter,background,border-radius,box-shadow,mask,transform,-webkit-backdrop-filter,-webkit-mask!important}[data-surface]:focus-visible{outline-color:var(--tui-border-focus)}@supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)){[data-surface]:before{mix-blend-mode:multiply}}button[data-surface]{cursor:pointer}[data-surface]:before,[data-surface]:after,[tuiSurfaceLayer]:before,[tuiSurfaceLayer]:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";z-index:-1;border-radius:inherit;pointer-events:none;background-size:cover;background-repeat:no-repeat;transition-property:opacity,transform,-webkit-backdrop-filter;transition-property:opacity,backdrop-filter,transform;transition-property:opacity,backdrop-filter,transform,-webkit-backdrop-filter}[tuiSurfaceLayer]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;position:absolute!important;z-index:-1;object-fit:cover;border-radius:inherit;box-sizing:border-box;transition-property:box-shadow,filter,padding}input[tuiSurfaceLayer]+[tuiSurfaceLayer]{will-change:padding;background-clip:content-box;overflow:clip;overflow-clip-margin:content-box}input[tuiSurfaceLayer]:checked+[tuiSurfaceLayer]{padding:var(--tui-gap)}input[tuiSurfaceLayer]:focus-visible+[tuiSurfaceLayer]{padding:var(--tui-gap)}@media (hover: hover) and (pointer: fine){[data-surface]:hover input[tuiSurfaceLayer]+[tuiSurfaceLayer]{padding:var(--tui-gap)}}input[tuiSurfaceLayer]{color:var(--tui-background-accent-2);-webkit-appearance:none;appearance:none;margin:0;border-radius:inherit;outline:none;box-shadow:inset 0 0,inset 0 0 var(--tui-background-neutral-1)}input[tuiSurfaceLayer]:checked{box-shadow:inset 0 0 0 calc(var(--tui-gap) / 2),inset 0 0 var(--tui-background-neutral-1)}input[tuiSurfaceLayer]:focus-visible{box-shadow:inset 0 0,inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1)}input[tuiSurfaceLayer]:checked:focus-visible{filter:brightness(.7);box-shadow:inset 0 0 0 calc(var(--tui-gap) / 2),inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1)}@media (hover: hover) and (pointer: fine){[data-surface]:hover input[tuiSurfaceLayer]{box-shadow:inset 0 0,inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1)}[data-surface]:hover input[tuiSurfaceLayer]:checked{filter:brightness(.9);box-shadow:inset 0 0 0 calc(var(--tui-gap) / 2),inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-background-neutral-1)}}[tuiSurface][data-surface=elevated],[tuiSurface][data-surface=floating]{box-shadow:var(--tui-shadow-small);background-color:var(--tui-background-elevation-2)}[tuiSurface][data-surface=elevated]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active,[tuiSurface][data-surface=floating]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active{box-shadow:var(--tui-shadow-small);transform:scale(.95)}@media (hover: hover) and (pointer: fine){[tuiSurface][data-surface=elevated]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover,[tuiSurface][data-surface=floating]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover{box-shadow:var(--tui-shadow-small-hover);transform:translate3d(0,-.25rem,0);background:var(--tui-background-elevation-2)}}[tuiSurface][data-surface=elevated]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active,[tuiSurface][data-surface=floating]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active{box-shadow:var(--tui-shadow-small);transform:scale(.95)}@media (hover: hover) and (pointer: fine){[tuiSurface][data-surface=elevated]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover,[tuiSurface][data-surface=floating]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover{box-shadow:var(--tui-shadow-small-hover);transform:translate3d(0,-.25rem,0);background:var(--tui-background-elevation-2)}}[tuiSurface][data-surface=flat],[tuiSurface][data-surface=neutral]{background-color:var(--tui-background-neutral-1)}[tuiSurface][data-surface=flat]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active,[tuiSurface][data-surface=neutral]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active{transform:scale(.95)}@media (hover: hover) and (pointer: fine){[tuiSurface][data-surface=flat]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover,[tuiSurface][data-surface=neutral]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover{transform:scale(1.15)}}[tuiSurface][data-surface=flat]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active,[tuiSurface][data-surface=neutral]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active{transform:scale(.95)}@media (hover: hover) and (pointer: fine){[tuiSurface][data-surface=flat]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover,[tuiSurface][data-surface=neutral]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover{transform:scale(1.15)}}\n"] }]
}] });
class TuiSurface {
constructor() {
this.nothing = tuiWithStyles(TuiSurfaceStyles);
this.tuiSurface = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSurface, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiSurface, isStandalone: true, selector: "[tuiSurface]", inputs: { tuiSurface: "tuiSurface" }, host: { attributes: { "tuiSurface": "" }, properties: { "attr.data-surface": "tuiSurface" } }, hostDirectives: [{ directive: i1.TuiAppearance, inputs: ["tuiAppearance", "tuiSurface"] }], ngImport: i0 }); }
}
export { TuiSurface };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSurface, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiSurface]',
hostDirectives: [
{
directive: TuiAppearance,
inputs: ['tuiAppearance: tuiSurface'],
},
],
host: {
tuiSurface: '',
'[attr.data-surface]': 'tuiSurface',
},
}]
}], propDecorators: { tuiSurface: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VyZmFjZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlL2RpcmVjdGl2ZXMvc3VyZmFjZS9zdXJmYWNlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxTQUFTLEVBQ1QsS0FBSyxFQUNMLGlCQUFpQixHQUNwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDaEUsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLHNDQUFzQyxDQUFDOzs7QUFFbkUsTUFVTSxnQkFBZ0I7K0dBQWhCLGdCQUFnQjttR0FBaEIsZ0JBQWdCLHdIQVJSLEVBQUU7OzRGQVFWLGdCQUFnQjtrQkFWckIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sRUFBRSxpQkFFRyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLEtBQUssRUFBRSxvQkFBb0I7cUJBQzlCOztBQUlMLE1BY2EsVUFBVTtJQWR2QjtRQWV1QixZQUFPLEdBQUcsYUFBYSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFHdEQsZUFBVSxHQUFHLEVBQUUsQ0FBQztLQUMxQjsrR0FMWSxVQUFVO21HQUFWLFVBQVU7O1NBQVYsVUFBVTs0RkFBVixVQUFVO2tCQWR0QixTQUFTO21CQUFDO29CQUNQLFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUUsY0FBYztvQkFDeEIsY0FBYyxFQUFFO3dCQUNaOzRCQUNJLFNBQVMsRUFBRSxhQUFhOzRCQUN4QixNQUFNLEVBQUUsQ0FBQywyQkFBMkIsQ0FBQzt5QkFDeEM7cUJBQ0o7b0JBQ0QsSUFBSSxFQUFFO3dCQUNGLFVBQVUsRUFBRSxFQUFFO3dCQUNkLHFCQUFxQixFQUFFLFlBQVk7cUJBQ3RDO2lCQUNKOzhCQUtVLFVBQVU7c0JBRGhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBEaXJlY3RpdmUsXG4gICAgSW5wdXQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0dWlXaXRoU3R5bGVzfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHtUdWlBcHBlYXJhbmNlfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2FwcGVhcmFuY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHRlbXBsYXRlOiAnJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zdXJmYWNlLnN0eWxlLmxlc3MnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICd0dWktc3VyZmFjZS1zdHlsZXMnLFxuICAgIH0sXG59KVxuY2xhc3MgVHVpU3VyZmFjZVN0eWxlcyB7fVxuXG5ARGlyZWN0aXZlKHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAnW3R1aVN1cmZhY2VdJyxcbiAgICBob3N0RGlyZWN0aXZlczogW1xuICAgICAgICB7XG4gICAgICAgICAgICBkaXJlY3RpdmU6IFR1aUFwcGVhcmFuY2UsXG4gICAgICAgICAgICBpbnB1dHM6IFsndHVpQXBwZWFyYW5jZTogdHVpU3VyZmFjZSddLFxuICAgICAgICB9LFxuICAgIF0sXG4gICAgaG9zdDoge1xuICAgICAgICB0dWlTdXJmYWNlOiAnJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtc3VyZmFjZV0nOiAndHVpU3VyZmFjZScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpU3VyZmFjZSB7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IG5vdGhpbmcgPSB0dWlXaXRoU3R5bGVzKFR1aVN1cmZhY2VTdHlsZXMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgdHVpU3VyZmFjZSA9ICcnO1xufVxuIl19