@taiga-ui/kit
Version:
Taiga UI Angular main components kit
38 lines (34 loc) • 18.8 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, Directive } from '@angular/core';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiBadgeOptionsProvider } from '@taiga-ui/kit/components/badge';
class Styles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-pin-5.8.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiPin]:where(*[data-tui-version=\"5.8.0\"]){--t-size: 2rem;transition-property:min-inline-size,grid-template-columns,block-size,border,margin,font;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:grid;isolation:isolate;align-items:center;grid-template-rows:100%;grid-template-columns:var(--t-size) 1fr;min-inline-size:var(--t-size);max-inline-size:11.25rem;block-size:var(--t-size);text-align:center;border-radius:100rem;font:var(--tui-typography-ui-xs);font-weight:700;box-sizing:border-box;color:var(--tui-text-primary-on-accent-2);background:var(--tui-background-accent-2);box-shadow:0 0 0 .125rem var(--tui-background-elevation-1);border:0 solid var(--tui-background-accent-2);transform:translate(calc(var(--tui-inline) * -50%),-50%)}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):empty{--t-size: .75rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):empty:before{display:none}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has([tuiPin]){border-color:currentColor;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>*,[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):before,[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):after{transition-duration:inherit!important}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>img{max-block-size:100%;box-sizing:border-box;border-radius:100%;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>tui-icon:not([tuiBadge]){transition-property:inline-size,font-size;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1.25rem;block-size:100%;inline-size:100%;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>tui-icon:not([tuiBadge]):before{transition-property:font-size;transition-duration:inherit;transition-timing-function:ease-in-out}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiPin]{color:inherit;border:.125rem solid;font:inherit;background:none;transform:none;box-shadow:none;grid-template-columns:100% 0fr}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiBadge]{transition-property:inset;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;inset-block-start:-.25rem;inset-inline-end:-.25rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiTitle]{transition-property:opacity,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:static;font:var(--tui-typography-ui-xs);font-weight:700;color:var(--tui-text-primary);margin-inline:.5rem .75rem;gap:.125rem;white-space:nowrap}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiTitle]:before{transition-property:mask-position;transition-duration:inherit;transition-timing-function:ease-in-out;content:\"\";position:absolute;inset:0;z-index:-1;inset-inline-end:-1px;background:var(--tui-background-elevation-1);border-radius:100rem;-webkit-mask-image:radial-gradient(circle closest-corner at left center,transparent calc(100% - .5px),black 100%);mask-image:radial-gradient(circle closest-corner at left center,transparent calc(100% - .5px),black 100%);-webkit-mask-position:calc(var(--t-size) / 2);mask-position:calc(var(--t-size) / 2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiTitle] [tuiSubtitle]{display:flex;gap:.125rem;font:var(--tui-typography-ui-2xs);color:var(--tui-text-secondary)}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiTitle] [tuiSubtitle] tui-icon:not([tuiBadge]){font-size:.75rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked){--t-size: 3.5rem;font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked)>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked) tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked)>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked)>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked)>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked):before{transform:scale(.99) translate(calc(var(--tui-inline) * -1.875rem),-1.875rem);opacity:1}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked):after{inset-block-start:4.5rem;opacity:1}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open{--t-size: 3.5rem;font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open:before{transform:scale(.99) translate(calc(var(--tui-inline) * -1.875rem),-1.875rem);opacity:1}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open:after{inset-block-start:4.5rem;opacity:1}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):before{transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;z-index:-1;inset-block:50% -.625rem;inset-inline:50% -.25rem;box-sizing:border-box;border-width:2.2rem 1.875rem;border-style:solid;border-color:inherit;opacity:0;transform:scale(.57) translate(calc(var(--tui-inline) * -1.875rem),-1.875rem);transform-origin:top var(--tui-inline-start);pointer-events:none;-webkit-mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):after{transition-property:inset-block-start,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;border:.1875rem solid currentColor;border-color:inherit;border-radius:100%;box-sizing:border-box;box-shadow:inherit;transform:translate(calc(var(--tui-inline) * -50%),-50%);opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, decorators: [{
type: Component,
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-pin-${TUI_VERSION}`, styles: ["[tuiPin]:where(*[data-tui-version=\"5.8.0\"]){--t-size: 2rem;transition-property:min-inline-size,grid-template-columns,block-size,border,margin,font;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:grid;isolation:isolate;align-items:center;grid-template-rows:100%;grid-template-columns:var(--t-size) 1fr;min-inline-size:var(--t-size);max-inline-size:11.25rem;block-size:var(--t-size);text-align:center;border-radius:100rem;font:var(--tui-typography-ui-xs);font-weight:700;box-sizing:border-box;color:var(--tui-text-primary-on-accent-2);background:var(--tui-background-accent-2);box-shadow:0 0 0 .125rem var(--tui-background-elevation-1);border:0 solid var(--tui-background-accent-2);transform:translate(calc(var(--tui-inline) * -50%),-50%)}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):empty{--t-size: .75rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):empty:before{display:none}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has([tuiPin]){border-color:currentColor;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>*,[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):before,[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):after{transition-duration:inherit!important}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>img{max-block-size:100%;box-sizing:border-box;border-radius:100%;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>tui-icon:not([tuiBadge]){transition-property:inline-size,font-size;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1.25rem;block-size:100%;inline-size:100%;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>tui-icon:not([tuiBadge]):before{transition-property:font-size;transition-duration:inherit;transition-timing-function:ease-in-out}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiPin]{color:inherit;border:.125rem solid;font:inherit;background:none;transform:none;box-shadow:none;grid-template-columns:100% 0fr}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiBadge]{transition-property:inset;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;inset-block-start:-.25rem;inset-inline-end:-.25rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiTitle]{transition-property:opacity,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:static;font:var(--tui-typography-ui-xs);font-weight:700;color:var(--tui-text-primary);margin-inline:.5rem .75rem;gap:.125rem;white-space:nowrap}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiTitle]:before{transition-property:mask-position;transition-duration:inherit;transition-timing-function:ease-in-out;content:\"\";position:absolute;inset:0;z-index:-1;inset-inline-end:-1px;background:var(--tui-background-elevation-1);border-radius:100rem;-webkit-mask-image:radial-gradient(circle closest-corner at left center,transparent calc(100% - .5px),black 100%);mask-image:radial-gradient(circle closest-corner at left center,transparent calc(100% - .5px),black 100%);-webkit-mask-position:calc(var(--t-size) / 2);mask-position:calc(var(--t-size) / 2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiTitle] [tuiSubtitle]{display:flex;gap:.125rem;font:var(--tui-typography-ui-2xs);color:var(--tui-text-secondary)}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])>[tuiTitle] [tuiSubtitle] tui-icon:not([tuiBadge]){font-size:.75rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked){--t-size: 3.5rem;font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked)>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked) tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked)>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked)>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked)>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked):before{transform:scale(.99) translate(calc(var(--tui-inline) * -1.875rem),-1.875rem);opacity:1}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):has(:checked):after{inset-block-start:4.5rem;opacity:1}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open{--t-size: 3.5rem;font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open:before{transform:scale(.99) translate(calc(var(--tui-inline) * -1.875rem),-1.875rem);opacity:1}[tuiPin]:where(*[data-tui-version=\"5.8.0\"])._open:after{inset-block-start:4.5rem;opacity:1}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):before{transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;z-index:-1;inset-block:50% -.625rem;inset-inline:50% -.25rem;box-sizing:border-box;border-width:2.2rem 1.875rem;border-style:solid;border-color:inherit;opacity:0;transform:scale(.57) translate(calc(var(--tui-inline) * -1.875rem),-1.875rem);transform-origin:top var(--tui-inline-start);pointer-events:none;-webkit-mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[tuiPin]:where(*[data-tui-version=\"5.8.0\"]):after{transition-property:inset-block-start,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;border:.1875rem solid currentColor;border-color:inherit;border-radius:100%;box-sizing:border-box;box-shadow:inherit;transform:translate(calc(var(--tui-inline) * -50%),-50%);opacity:0}\n"] }]
}] });
class TuiPin {
constructor() {
this.nothing = tuiWithStyles(Styles);
this.open = input('', { alias: 'tuiPin' });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPin, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiPin, isStandalone: true, selector: "[tuiPin]", inputs: { open: { classPropertyName: "open", publicName: "tuiPin", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.8.0", "tuiPin": "" }, properties: { "class._open": "open()" } }, providers: [tuiBadgeOptionsProvider({ appearance: 'primary', size: 's' })], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPin, decorators: [{
type: Directive,
args: [{
selector: '[tuiPin]',
providers: [tuiBadgeOptionsProvider({ appearance: 'primary', size: 's' })],
host: { 'data-tui-version': TUI_VERSION, tuiPin: '', '[class._open]': 'open()' },
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiPin };
//# sourceMappingURL=taiga-ui-kit-components-pin.mjs.map